sass/scss篇

sass/scss文件与vue组件样式代码

/* variable.scss */
$color: orange;
// vue组件内的style标签，将要使用上述变量的地方
<style lang="scss">
.scss div {
color: $color;
}
</style>

sass 全局变量引入方法一

使用css.loaderOptions
此处友情提示 sass-loader v7 之前使用 data：’’ 之后使用prependData：‘’请根据项目sass-loader版本选择
重点提示！！！！引用处分号“；”不能缺少，缺少直接报错，因为此方法是直接插入语句块至项目中使用sass语法的标签内，sass语法强制必须使用分号“；”结尾，更详细讲解请参考vue-cli官方文档。

module.exports = {
css: {
loaderOptions: {
sass: {
// data：`@import "~@/assets/variable.scss";` v7之前使用的是data，现在改成了prependData
prependData: `@import "~@/assets/variable.scss";`
/* prependData: `
@import "~@/assets/variable.scss";
@import "~@/assets/variable2.scss";
` */
}
}
}
}

sass 全局变量引入方法二

使用chainWebpack
根据使用方法选择安装插件 style-resources-loader或者sass-resource-loader
友情提醒：**patterns: “./src/assets/variable.scss”**引用的scss文件，如果文件内语法存在问题，也会直接报错，此处不需要在引用处最后添加分号“；”，文件内请根据sass与scss语法规则编辑，如果我没有料错，此方法应该是把引用文件的内容插入目标文件，而非上文方法提到的插入一个import
使用方法代码如下：

module.exports = {
chainWebpack: config => {
// 需要安装 style-resources-loader 插件
const oneOfsMap = config.module.rule("scss").oneOfs.store;
oneOfsMap.forEach(item => {
item
.use("style-resources-loader")
.loader("style-resources-loader")
.options({
// 需要插入的文件路径
patterns: "./src/assets/variable.scss"
// 需要插入的文件路径数组
// patterns: ["./path/to/vars.styl", "./path/to/mixins.styl"]
})
.end();
});
// 也可以使用 sass-resource-loader 插件
// const oneOfsMap = config.module.rule("scss").oneOfs.store;
// oneOfsMap.forEach(item => {
// item
// .use("sass-resources-loader")
// .loader("sass-resources-loader")
// .options({
// // 需要插入的文件路径
// resources: "./src/assets/variable.scss"
// // 需要插入的文件路径数组
// // resources: ["./path/to/vars.scss", "./path/to/mixins.scss"]
// })
// .end();
});
}
}

sass 全局变量引入方法三

使用pluginOptions
需要执行 vue add style-resources-loader命令
命令执行会自动安装 vue-cli-plugin-style-resources-loader会自动提示使用什么预编译语言、会根据你选择的自动配置，只需要填写引用文件的路径
友情提示：如果使用此方法安装了以上插件，而又放弃这种方案，编译时可能会报错，可以npm uninstall vue-cli-plugin-style-resources-loader 卸载此插件。

const path = require("path");
module.exports = {
pluginOptions: {
"style-resources-loader": {
preProcessor: "scss",
// patterns: "./src/assets/variable.scss",
patterns: [path.resolve(__dirname, "./src/assets/variable.scss")]
}
}
}

less篇

less文件与vue组件样式代码

/* variable.less */
@color: pink;
// vue组件内的style标签，将要使用上述变量的地方
<style lang="less">
.less {
> div {
color: @color;
}
}
</style>

less 全局变量引入方法一

使用css.loaderOptions
less此方法只支持变量key:value赋值，若要使用less文件中变量，请使用以下两种方案

module.exports = {
css: {
loaderOptions: {
less: {
globalVars: {
"@color": "#f00"
}
}
}
}
}

less 全局变量引入方法二

使用chainWebpack
需要安装 style-resources-loader 插件

module.exports = {
chainWebpack: config => {
// 需要安装 style-resources-loader 与stylus一致
const oneOfsMap = config.module.rule("less").oneOfs.store;
oneOfsMap.forEach(item => {
item
.use("style-resources-loader")
.loader("style-resources-loader")
.options({
// 需要插入的文件路径
patterns: "./src/assets/variable.less"
// 需要插入的文件路径数组
// patterns: ["./path/to/vars.less", "./path/to/mixins.less"]
})
.end();
});
}
}

less 全局变量引入方法三

使用pluginOptions
需要执行 vue add style-resources-loader命令
命令执行会自动安装 vue-cli-plugin-style-resources-loader会自动提示使用什么预编译语言、会根据你选择的自动配置，只需要填写引用文件的路径
友情提示：如果使用此方法安装了以上插件，而又放弃这种方案，编译时可能会报错，可以npm uninstall vue-cli-plugin-style-resources-loader 卸载此插件。

module.exports = {
pluginOptions: {
"style-resources-loader": {
preProcessor: "less",
patterns: "./src/assets/variable.less"
// patterns: ["./src/assets/variable.less"]
}
}
}

原文链接：CSS 预编译语言变量全局引用方式 vue-cli@3.0 stylus/sass/less 使用方法_rudy_zhou的博客-CSDN博客
Vue scss 引入变量报错_老谭TYH的博客-CSDN博客_scss 引用变量报错

Vue scss 引入变量报错相关推荐

vite：vue中引入图片报错require is not defined
问题在 vite 项目中这样引入图片报错 images: require('../assets/images/right.png') 改为 images: new URL('../assets/im ...
vue中引入jquery报错问题
vue-cli搭建的vue项目中使用到jquery插件,需要引入jquery, 在无任何配置的情况下,直接在组件中import引入,在mounted时候打印$ 会显示undefined报错问题, 感觉 ...
vue3.0引入ant-design-vue报错 export ‘default‘ (imported as ‘Vue‘) was not found in ‘vue‘
vue3.0引入ant-design-vue报错 export 'default' (imported as 'Vue') was not found in 'vue' 报错如下解决办法根目录命令 ...
Vue框架Vue-cli脚手架引入图片报错
Vue框架Vue-cli脚手架引入图片报错一.import导入图片方法第一步:在.vue文件中import edit from 'path'(path是图片与.vue的相对路径) 第二步:在dat ...
(vue中使用v-for报错)You are binding v-model directly to a v-for iteration alias.
(vue中使用v-for报错)You are binding v-model directly to a v-for iteration alias. 分析: 这个错误是由于在使用v-for循环做一些 ...
Vue项目 npm i 报错npm ERR! code 1
Vue项目 npm i 报错npm ERR! code 1 记录一下 npm i 的时候报错,报错信息如下记录一下 npm i 的时候报错,报错信息如下 npm ERR! code 1 npm ER ...
Vue项目 npm i 报错npm ERR code 1
Vue项目 npm i 报错npm ERR! code 1 记录一下 npm i 的时候报错,报错信息如下记录一下 npm i 的时候报错,报错信息如下 npm ERR! code 1 npm ER ...
启动vue项目失败，报错Failed at the node-sass@4.14.1 postinstall script.
在启动vue项目的时候报错报错信息如下:npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! node-sass@4.14.1 postinstall ...
npm run dev (明明有.vue文件)，却报错 cannot GET
npm run dev (明明有.vue文件),却报错 cannot GET 其他问题: vuejs中执行npm run dev出现页面cannot GET/问题

Vue scss 引入变量报错