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

Question

我正在使用 webpack 开发一个反应应用程序。我的问题是我的 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 时遇到了类似的问题，其中所有子/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 之后，我意识到我愚蠢地将我的entry.js 设置为在不合逻辑的情况下遍历子目录。

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

我知道这看起来有点简单，但是这个忽略让我很头疼。希望这对某人有帮助！