将 sass-resources-loader 与 vue-cli v3.x 一起使用

Posted 2023-02-22

【中文标题】将 sass-resources-loader 与 vue-cli v3.x 一起使用

【英文标题】：Using sass-resources-loader with vue-cli v3.x

【发布时间】：2018-08-11 15:58:35

【问题描述】：

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

【参考方案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'),
      )
  ,

希望这会有所帮助！

【讨论】：

在我的情况下，vue-loader 选项只包含 compilerOptions: preserveWhitespace: false 这导致 TypeError: Cannot read property 'scss' of undefined 知道有什么问题吗？

这似乎不再适用于 vue-loader 15。

【参考方案2】：

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

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

【讨论】：

正如@constant-meiring 之前提到的，这是使用 vue-loader 15 解决这个问题的正确方法

【参考方案3】：

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

【讨论】：

虽然此代码可能会回答问题，但提供有关 why 和/或 如何 此代码回答问题的附加上下文可提高其长期价值.