1.全局引入样式文件跟着官网步骤走
# Sass
npm install -D sass-loader sass
# Less
npm install -D less-loader less
2.官网配置介绍代码:
// 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'
}
}
}
}
}
3. 当你发现TypeError: this.getOptions is not a function的时候
答: 此时是提示你,你的 sass-loader 或者less-loader 的版本过高
- scss;最好选择10.x;我试了7.x直接全局样式功能不生效!怀疑人生的找了半天才发现版本过低
npm uninstall sass-loader
npm install sass-loader@10.0.0
- less暂无;注意版本问题,版本低了全局样式功能不会生效!
- 以上注意版本问题,版本低了全局样式功能不会生效!