vue-cli SCSS 引入全局变量资源

最新推荐文章于 2024-05-30 06:15:00 发布

原创最新推荐文章于 2024-05-30 06:15:00 发布 · 274 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #node.js #sass

收录于

本文介绍如何在Vue CLI项目中使用sass-resources-loader来引入SCSS全局变量资源，包括安装依赖、配置vue.config.js文件等内容。

vue-cli SCSS 引入全局变量资源

# 安装 sass-resources-loader
npm i sass-resources-loader -D

/* vue.config.js 修改chainWebpack */
chainWebpack(config) {
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test

    const oneOfsMap = config.module.rule('scss').oneOfs.store
    oneOfsMap.forEach(item => {
      item
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          // scss 全局变量
          resources: ['src/assets/styles/variables.scss']
        })
        .end()
    })

   // 其他代码