Question

我正在使用webpack开发一个react应用程序。我的问题是我的scss文件未正确编译或未包含在我的开发模式中。但在建造生产之后，这些款式都包括在内。这个问题非常令人困惑。请帮帮我。

我在开发配置中处理scss文件的webpack配置如下：

  {
    test: /\.scss$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          importLoaders: 1,
        },
      },
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss', 
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            autoprefixer({
              browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9', // React doesn't support IE8 anyway
              ],
              flexbox: 'no-2009',
            }),
          ],
        },
      },
      'sass-loader'
    ],
  },

生产以下内容：

  {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract(
      Object.assign(
        {
          fallback: require.resolve('style-loader'),
          use: [
            {
              loader: require.resolve('css-loader'),
              options: {
                importLoaders: 1,
                minimize: true,
                sourceMap: true,
              },
            },
            {
              loader: require.resolve('postcss-loader'),
              options: {
                ident: 'postcss',
                plugins: () => [
                  require('postcss-flexbugs-fixes'),
                  autoprefixer({
                    browsers: [
                      '>1%',
                      'last 4 versions',
                      'Firefox ESR',
                      'not ie < 9', 
                    ],
                    flexbox: 'no-2009',
                  }),
                ],
              },
            },
            {
              loader: require.resolve('sass-loader')
            },
          ],
        },
        extractTextPluginOptions
      )
    ),
  },

编辑：

当我从项目中删除scss文件并只写css文件时，它可以正常工作。在webpack中，我从end中删除sass-loader并为/.css $ /。

编写测试

但是我只需要使用sass文件，怎么做？请帮忙。

Answer 1

所以我在运行sass-loader时遇到了类似的问题，所有的子/ mixin /变量sass文件都是自己编译的。我的目录结构的简化示例如下所示：

entry.js
webpack.config.js
sass/
|-sass/bootstrap.override.scss
|-sass/partials/
|--|-sass/partials/_variables.scss
|--|-sass/partials/_something.scss
|--|-sass/partials/mixins/
|--|--|-sass/partials/mixins/_mixins.scss

基本上，bootstrap.override.scss包含了所有子目录中的所有信息，因此是唯一需要打包的东西，因为它会以正确的顺序编译所有帮助文件。这是我的配置：

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

经过一些复杂的排除语句并通过@includes解析webpack-append到mixins之后，我意识到我笨拙地设置了我的entry.js，当它出现在非逻辑上时，它会走下子目录。

所以我将entry.js文件的sass行改为：require.context("./sass", false, /.scss$/)

我知道这看起来有点简单，但忽视让我头疼。希望这有助于某人！

Webpack没有在开发中编译/包含我的scss文件

编辑：

1 个答案: