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

Question

我想将某些变量导入到.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') 
      ] 
     }, 
     }, 
    } 
    }, 
    ... 

我看到很多其他有这种需要，不知道你曾经找到一个解决方案。这是很好的模板，但没有变数是没用的...（当然，我可以把绝对路径，它的工作原理，但这是一个糟糕的做法......）

Answer 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，你可以使用默认的（或删除）其他。