帶有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，你可以使用默認的（或刪除）其他。