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$/)

我知道這似乎有點簡單，但是忽略卻讓我頭疼。 希望這對某人有幫助！