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

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中，我从末端删除sass-loader并为/.css$/编写测试。

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

Answer 1

因此，我在运行sass-loader时遇到了类似的问题，其中所有child / mixin / variables 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"
                    ]
                })
            },

经过一些复杂的排除语句并通过webpack-append @includes解析为mixins webpack-append ，我意识到我愚蠢地将我的entry.js设置为在不合逻辑的情况下可以遍历子目录。

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

我知道这似乎有点简单，但是忽略却让我头疼。 希望这对某人有帮助！