Question

所以我的sass文件夹在我的/ src文件夹之外，如下所示：

/sass
/src
webpack.config.js

从我的src / main.js

中导入我的代码

import '../sass/global.scss';

问题是我想把我的sass移到我的/ src文件夹中。所以我接着将导入更改为import './sass/global.scss';，然后再次运行webpack build，但这次我会得到：

ERROR in ./~/css-loader?{"importLoaders":2}!./~/postcss-loader/lib?{}!./~/sass-loader/lib/loader.js!./src/sass/modules/_response-control.scss
    Module build failed: 
      border-top: 1px solid darken($gray-lighter, 20%);
                                  ^
          Undefined variable: "$gray-lighter".
          in /Users/allen/work/src/sass/modules/_response-control.scss (line 9, column 32)

这是我在webpack配置中的sass规则：

test: [/\.scss$/, /\.sass$/],
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      {
        loader: 'css-loader',
        options: {
          importLoaders: 2,
        },
      },
      {
        loader: 'postcss-loader',
        options: {}
      },
      {
        loader: 'sass-loader'
      },
    ],
  }),

什么会使它在src文件夹之外工作，但不在src文件夹中？

Answer 1

看起来$gray-lighter可能是从另一个sass文件导入的变量 - 当您移动_response-control.scss文件时，它的导入仍然正确吗？

Answer 2

weparck配置很好，因为你没有使用include / exclude属性，所以它将使用sass-loader处理/ src文件夹。

我认为您面临的问题是scss文件中的路径。

在/ src中移动Sass（使用webpack）

2 个答案: