使用 sass-resources-loader 和 vue-cli v3.x

Question

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

Answer 1

vue-cli@3.x 使用 webpack-chain 来管理它的 webpack 配置。将 sass-resources-loader 添加到预定义的 webpack 配置中。将以下内容添加到 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'),
      })
  },
}

希望对您有所帮助！

Answer 2

如您在 the docs 中所见，最简单的方法是对 sass 预处理器使用 loaderOptions。不需要任何额外的依赖：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/scss/_variables.scss";
          @import "@/scss/_mixins.scss";
        `
      }
    }
  }
};

Answer 3

css: {
    loaderOptions: {
        stylus: {
            loader: 'stylus-resources-loader',
            import: [path.resolve(__dirname, 'src/styles/imports.styl')]
        }
    }
}

使用 sass-resources-loader 和 vue-cli v3.x

Using sass-resources-loader with vue-cli v3.x

webpack

vue.js

vue-cli