官方文档说明:https://cli.vuejs.org/zh/guide/css.html#向预处理器-loader-传递选项
向预处理器 Loader 传递选项
此时需要看清你的 sass-loader 的版本,不同的版本。配置内容不一样,尤其sass和scss在v8版本的配置上注意点,官方文档都说了很明晰。
有的时候你想要向 webpack 的预处理器 loader 传递选项。你可以使用 vue.config.js
中的 css.loaderOptions
选项。比如你可以这样向所有 Sass/Less 样式传入共享的全局变量:
// vue.config.js 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";` }, // 给 less-loader 传递 Less.js 相关选项 less:{ // http://lesscss.org/usage/#less-options-strict-units `Global Variables` // `primary` is global variables fields name globalVars: { primary: '#fff' } } } } }
sass-loader v8 以下版本,则个选项名是 data
sass-loader v8 以下版本,则个选项名是 prependData
sass-loader v8 以下版本,则个选项名是 additionalData