配置sass-resources-loader

详细查看sass-resources-loader的GitHub网站

  • 新建vue.config.js文件
  • 开始配置内容
      // scss-resources-loader配置
module.exports = {
   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/styles/variable.scss'
          // 也可以选择全局变量路径数组, 如果你有多个文件需要成为全局,就可以采用这种方法
          // resources: ['./path/to/vars.scss', './path/to/mixins.scss']
          // 或者你可以将多个scss文件@import到一个main.scss用第一种方法,都是可以的
        })
        .end()
    })
  }
}
  • 如果已经有chainWebpack函数可以继续往后写,注意好写注释。
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐