关于sass:在vue各个组件中应用全局scss变量

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.js
module.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.js
module.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, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。