c.方法3
如果使用的vue-cli的版本是高版本的，那么可以直接修改vue.config.js这个文件的chainWebpack这个属性来实现多个scss文件的公用。
步骤1：同样首先安装sass-resources-loader这个插件。
`npm i sass-resources-loader --save-dev`
步骤2：在项目主目录下新建一个vue.config.js配置文件。大概的配置参考这篇文章
`const path=require(``'path'``)`
`module.exports={`
`publicPath: process.env.NODE_ENV ===` `'production'` `?` `'/public/'` `:` `'./'``,`
`assetsDir:``'assets'``,`
`indexPath:``'myIndex.html'``,`
`filenameHashing:``false``,`
`productionSourceMap:` `false``,`
`chainWebpack:config=>{`
`const types=[``'vue'``]`
`types.forEach(type=>{`
`config.module.rule(``'scss'``).oneOf(type).use(``'style-resource'``)`
`.loader(``'style-resources-loader'``)`
`.options({`
`patterns:[`
`//公用的scss变量`
`path.resolve(__dirname,``'./src/assets/css/variable.scss'``),`
`//公用的scss混入`
`path.resolve(__dirname,``'./src/assets/css/mixin.scss'``),`
`//共用的默认样式`
`path.resolve(__dirname,``'./src/assets/css/base.scss'``)`
`]`
`})`
`})`
`}`
`}`
步骤3：测试阶段，和方法一的步骤3一样。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
