SASS/SCSS全局变量及样式在webpack项目应用，vue-cli的配置如何？
Author：zhoulujun Date：
我们习惯上偏向于sass写样式。sass的全局变量，在react和在vue中，不可能每个文件里面写一个。所以需要全局全局样式与全局变量的问题。
sass-loader配置
查看sass-loader文档：
https://www.npmjs.com/package/sass-loader
https://github.com/webpack-contrib/sass-loader#additionaldata
| Name | Type | Default | Description |
|---|---|---|---|
implementation | {Object} | sass | Setup Sass implementation to use. |
sassOptions | {Object|Function} | defaults values for Sass implementation | Options for Sass. |
sourceMap | {Boolean} | compiler.devtool | Enables/Disables generation of source maps. |
additionalData | {String|Function} | undefined | Prepends/Appends Sass/SCSS code before the actual entry file. |
webpackImporter | {Boolean} | true | Enables/Disables the default Webpack importer. |
其中， additionalData，就可以配置全局变量
全局SASS/SCSS变量在Vue项目中应用解决方案
vue-cli配置sass全局变量
首先查看官方文档：https://cli.vuejs.org/zh/guide/css.html#向预处理器-loader-传递选项
样例配置如下
module.exports = {
css: {
loaderOptions: {
// 给 sass-loader 传递选项
sass: {
// @/ 是 src/ 的别名
// 所以这里假设你有 `src/variables.sass` 这个文件
// 注意：在 sass-loader v8 中，这个选项名是 "prependData"
additionalData: `@import "~@/variables.sass"`
},
// 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
// 因为 `scss` 语法在内部也是由 sass-loader 处理的
// 但是在配置 `prependData` 选项的时候
// `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
// 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
scss: {
additionalData: `@import "~@/variables.scss";`
},
}
}}但是，这个配置，陪下下来，并不认。谷歌找了下，貌似是把additionalData 修改为data
module.exports = {
css: {
loaderOptions: {
sass: {
data: `@import "@/styles/_variables.scss";`
}
}
}
};这个会报错
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'data'. These properties are valid:
谷歌再插了下
将data改成prependData
// 旧
data: `@import "@/assets/scss/_variable.scss";`
// 新
prependData: `@import "@/assets/scss/_variable.scss";`
坑呀。这个还可以引入全局样式
Vue-cli如何配置可以导入全局样式，并且在head标签中不重复引入？
css: {
loaderOptions: {
// 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
// 因为 `scss` 语法在内部也是由 sass-loader 处理的
// 但是在配置 `prependData` 选项的时候
// `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
// 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
sass: {
prependData: `
//变量
@import "./src/assets/css/variable.scss";
//混入
@import "./src/assets/css/mixin.scss";
//全局样式重复引入了了
@import "./src/assets/css/base.scss";
`
}
}这样就可以解决了
转载本站文章《SASS/SCSS全局变量及样式在webpack项目应用，vue-cli的配置如何？》,
请注明出处：https://www.zhoulujun.cn/html/webfront/style/sass/2020_0903_8555.html