在项目开发过程中,有一些共同的sass样式我想抽出封装到一个文件,利用sass的mixin语法来封装变量,但是在这个过程中一直会报错,先是识别不出来@mixin 和@include,后来是报错sass等一些插件的问题。后来是这样解决的:
首先需要安装以下这些依赖:
"sass": "^1.56.1",
"sass-loader": "^13.2.0",
"sass-resources-loader": "^2.2.5",
安装方式:
npm install sass sass-resources-loader sass-resources-loader --save-dev
其次是在vue.config.js中这样配置:
chainWebpack(config) {
const oneOfsMap = config.module.rule('scss').oneOfs.store
oneOfsMap.forEach(item => {
item
.use('sass-resources-loader')
.loader('sass-resources-loader')
.options({
// Provide path to the file with resources
// 要公用的scss的路径
resources: ['./src/styles/variables.scss', './src/styles/mixin.scss']
})
.end()
})
},
这样就能全局使用sass了