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，则可以使用默认值（或删除）另一个。

使用vue-loader和sass-loader的webpack无法导入.scss文件

1 个答案: