1.开发环境 vue+sass
2.电脑系统 windows10专业版
3.在应用vue+sass开发的过程中,咱们常常应用到sass,上面我来分享一下在应用sass的时候遇到的问题,心愿对你有所帮忙。
4.首先装置 sass-loader

npm install sass-loader --save --dev

5.装置 sass-resources-loader

npm install sass-resources-loader --save --dev

6.应用 sass-resources-loader官网配置

如果你应用vue-cli 3+ 或 4+ ，你须要在工程文件根目录下新建vue.config.js文件，也就是在packge.json同级目录下。并增加以下代码。
// vue.config.jsmodule.exports = {/******************上面是我本人的代码*************************次要是配置门路别名或其余的loader的，不必增加*******/    configureWebpack: {        resolve: {            alias: {//门路别名                'assets': '@/assets',                'common': '@/common',                'network': '@/network',                'components': '@/components',                'views': '@/views',            }        },    },/***********************上面是须要增加的***********************/    chainWebpack: config => {        const oneOfsMap = config.module.rule('scss').oneOfs.store        oneOfsMap.forEach(item => {          item            .use('sass-resources-loader')            .loader('sass-resources-loader')            .options({              // 全局变量文件门路，只有一个时可将数组省去              resources: ['./src/assets/chenGolbal/chenGolbalcss.scss']            })            .end()        })      }}

7.应用vue-cli官网配置:

// vue.config.jsmodule.exports = {  css: {    loaderOptions: {      // 给 sass-loader 传递选项      sass: {        // @/ 是 src/ 的别名        // 所以这里假如你有 `src/assets/chenGolbal/chenGolbalcss.scss` 这个文件        // 留神：在 sass-loader v7 中，这个选项名是 "data"        prependData: `@import "~@/assets/chenGolbal/chenGolbalcss.scss"`      },      // 默认状况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时失效      // 因为 `scss` 语法在外部也是由 sass-loader 解决的      // 然而在配置 `data` 选项的时候      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号      // 在这种状况下，咱们能够应用 `scss` 选项，对 `scss` 语法进行独自配置      scss: {        prependData: `@import "~@/assets/chenGolbal/chenGolbalcss.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'        }      }    }  }}
这种配置看上去更加清晰

8.在chenGolbalcss.scss中增加代码:

@mixin chenh1 { color: blue;}

9.在vue组件中应用:

.chenh1{    @include chenh1;  }

10.本期的教程到了这里就完结啦,是不是很nice,心愿对你有所帮忙,让咱们一起致力走向巅峰。