Reactjs Webpack未在开发中编译/包含我的scss文件

我正在开发一个带有网页包的react应用程序。我的问题是，我的scss文件要么没有正确编译，要么没有包含在我的开发模式中。但在为生产而构建之后，这些样式也包括在内。这个问题很令人困惑。请帮我做这个

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

  {
    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加载器”，
选项：{
进口装载机：1，
},
},
{
加载器：“postss加载器”，
选项：{
标识：'邮政编码'，
插件：（）=>[
需要（'PostSS-flexbugs-fixes'），
自动刷新器({
浏览器：[
'>1%',
“最后4个版本”，
“Firefox ESR”，
'不是ie<9'，//React无论如何都不支持IE8
],
flexbox:‘no-2009’，
}),
],
},
},
“sass loader”
],
},

生产时，应注意以下事项：

  {
    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$/,，
加载程序：ExtractTextPlugin.extract(
Object.assign(
{
回退：require.resolve（'style-loader'），
使用：[
{
加载器：require.resolve（'css-loader'），
选项：{
进口装载机：1，
对,，
sourceMap:true，
},
},
{
加载器：require.resolve（'postss-loader'），
选项：{
标识：'邮政编码'，
插件：（）=>[
需要（'PostSS-flexbugs-fixes'），
自动刷新器({
浏览器：[
'>1%',
“最后4个版本”，
“Firefox ESR”，
“不是ie<9”，
],
flexbox:‘no-2009’，
}),
],
},
},
{
加载器：require.resolve（'sass-loader'）
},
],
},
提取文本插入操作
)
),
},

编辑： 当我从我的项目中删除scss文件并且只写css文件时，它就工作了。在webpack中，我从末尾删除sass加载程序，并为/.css$/编写测试

---

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

因此，我在运行sass加载程序时遇到了类似的问题，其中所有的子/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

解析到mixin之后，我意识到我愚蠢地将entry.js设置为在不符合逻辑的情况下遍历子目录

因此，我将entry.js文件的sass行更改为：

require.context（“./sass”，false，/.scss$/）

---

我知道这似乎有点简单，但疏忽让我头疼。希望这对别人有帮助

您正在运行哪个版本的webpack？@Ematipico-webpack 2.6.1谢谢，但它在这里不起作用。我还切换到cssnext，比sass好得多