在 vue-cli v3.x 中使用 sass-resources-loader [英] Using sass-resources-loader with vue-cli v3.x

问题描述

如何在 vue-cli@3 中使用 sass-resources-loader.x 添加全局 scss 变量和 mixins.

How to use sass-resources-loader with vue-cli@3.x to add global scss variables and mixins.

推荐答案

vue-cli@3.x 使用 webpack-chain 来管理它的 webpack 配置.将 sass-resources-loader 添加到预定义的 webpack 配置中.将以下内容添加到 vue.config.js

vue-cli@3.x uses webpack-chain to manage its webpack config. To add sass-resources-loader to the predefined webpack config. Add the following to the vue.config.js

vue.config.js

const path = require('path')

module.exports = {
  lintOnSave: false,
  chainWebpack: (config) => {
    config
      .module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        options.loaders.scss = options.loaders.scss.concat({
          loader: 'sass-resources-loader',
          options: {
            resources: path.resolve('./src/scss/_variables.scss'),
          },
        })
        return options
      })

    config
      .module
      .rule('scss')
      .use('sass-resources-loader')
      .loader('sass-resources-loader')
      .options({
        resources: path.resolve('./src/scss/_variables.scss'),
      })
  },
}

希望这有帮助！

这篇关于在 vue-cli v3.x 中使用 sass-resources-loader的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！