mpVue配置sass全局变量

参考了网上的几种方法,我总结了一种最简洁的的方法:
1、确保有安装这3个包sass-loader,node-sass,sass-resources-loader:,没有的话就安装:

npm install sass-loader node-sass --save-dev

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

2、修改mpvue的配置文件build/utils.js

// https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    wxss: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    // 修改处-开始
    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/_macro.scss')// 此路径就是你定义全局scss变量的路径,可随你自己的更改
        }
      }
    ),
    // 修改处-结束
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

重新运行一下就ok了。

相关推荐