webpack与vue-loader和sass-loader一起使用时无法导入.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')
          ]
        },
      },
    }
  },
  ...

我看到很多人都有这种需求，不知道你是否找到了解决方案。将sass引入模板中是很好的，但如果没有变量，它就没什么用处了...（当然，我可以直接放置绝对路径，但那是一种糟糕的做法...）

- Daniele

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，可以使用默认设置（或删除）其他加载器。

- SnoProblem

---

我想澄清一下，如果您同时使用两种口味，每种口味都需要选项，即使是同一个sass-loader在工作，这一点很重要。只是为了全面。 - SnoProblem