带有 vue-loader 和 sass-loader 的 webpack 无法导入 .scss 文件

Posted 2023-02-22

【中文标题】带有 vue-loader 和 sass-loader 的 webpack 无法导入 .scss 文件

【英文标题】：webpack with vue-loader and sass-loader can't import .scss files

【发布时间】：2017-12-11 10:17:28

【问题描述】：

我正在尝试将一些变量导入 .vue 组件，但它不起作用，我怀疑 webpack 的配置不正确...

.vue

<style scoped lang="scss">
    @import "variables";
    ...

config.js

...
   
    test: /\.vue$/,
    loader: 'vue-loader',
    options: 
      loaders: 
        'sass-loader': 
          data: '@import "variables";',
          includePaths: [
            // yes, I've tested different paths with no luck...
            '/src/scss',
            './src/scss',
            path.resolve(__dirname, '/src/scss'),
            path.resolve(__dirname, './src/scss')
          ]
        ,
      ,
    
  ,
  ...

我看到很多其他人有这种需求，想知道你是否找到了解决方案。将 sass 放入模板很好，但没有变量是没有用的......（当然，我可以只放绝对路径，它可以工作，但这是一个不好的做法......）

【参考方案1】：

我刚刚在我当前的项目中解决了这个问题，所以这里是我的工作 webpack 配置的相关部分：

  test: /\.vue$/,
  loader: 'vue-loader',
  options: 
    esModule: true,
    loaders: 
      sass: [ 'vue-style-loader',
              'css-loader',
              
                  loader: 'sass-loader',
                  options: 
                      indentedSyntax: true;
                      data: '@import "variables";',
                      includePaths: [
                          'src/styles',
                      ],
                  ,
              ,
            ],
      scss: [ 'vue-style-loader',
              'css-loader',
              
                  loader: 'sass-loader',
                  options: 
                      data: '@import "variables";',
                      includePaths: [
                          'src/styles',
                      ],
                  ,
              ,
            ],

加载器由 vue 文件中的文件类型或语言标签键入，然后分配特定语言的加载器列表。如果您只使用 sass 或 scss 独占，则可以使用（或丢弃）另一个的默认值。

【讨论】：

我想明确表示，如果您同时使用这两种口味，则每种口味都需要这些选项，即使是相同的 sass-loader 做这项工作。只是彻底。