Webpack在后续版本中编译错误

Question

我的应用程序第一次构建良好。但是，当我更改JavaScript源或scss文件（使用webpack-dev-server时）并重新编译野兽时，我从sass-loader中得到了一个奇怪的外观错误，我猜：

ERROR in ./src/DetailView/styles.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/style-loader!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/style-loader!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/style-loader!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/style-loader!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/style-loader!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/style-loader!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/style-loader!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!.
(I shortend the output, because that sequence is much longer in reality ...)

错误显示的最后一部分：

[...continuing]loader.js!./src/DetailView/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import '../../assets/styles/sizes';
^
      Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"
      in /Users/edgar/projects/web/wiwi/src/DetailView/styles.scss (line 1, column 1)
 @ ./src/DetailView/styles.scss 2:14-10124 21:1-42:3 22:19-10129
 @ ./src/DetailView/index.jsx
 @ ./src/App.jsx
 @ ./src/index.jsx
 @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.jsx

源文件src/DetailView/styles.scss如下所示：

@import '../../assets/styles/sizes';

#detail-view {
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.9);
  padding: $defaultPadding;
}

我的webpack配置看起来像这样（我做了一些拆分，因为在开发模式下，我不希望CSS放在单独的文件中）

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const pathsToClean = [
  'dist'
];

const cleanOptions = {
  // root:     '/full/webpack/root/path',
  // exclude:  [ 'shared.js' ],
  verbose: true,
  dry: false
};

const config = {
  entry: {
    main: './src/index.jsx',
    global: './src/global.jsx'
  },

  devServer: {
    inline: true,
    hot: true
  },

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },

  devtool: 'inline-source-map',

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: path.resolve(__dirname, 'node_modules'),
        use: [ 'babel-loader', 'eslint-loader' ]
      },
      {
        test: /\.svg$/,
        exclude: path.resolve(__dirname, 'node_modules'),
        use: [ 'url-loader' ]
      }
    ]
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new CleanWebpackPlugin(pathsToClean, cleanOptions), new HtmlWebpackPlugin({
      template: 'assets/index.html',
      chunksSortMode: 'manual',
      chunks: [ 'global', 'main' ],
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
    new CopyWebpackPlugin([
      { from: 'assets/img', to: 'img/' },
      { from: 'assets/font', to: 'font/' },
    ])
  ],

  resolve: {
    alias: {
      styles: path.resolve(__dirname, 'assets', 'styles'),
      img: path.resolve(__dirname, 'assets', 'img')
    },
    extensions: [ '.js', '.jsx' ],
    modules: [
      path.resolve(__dirname, 'src'),
      path.resolve(__dirname, 'node_modules')
    ]
  }
};

module.exports = (env, args) => {
  if (env == 'production') {
    config.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: MiniCssExtractPlugin.loader,
        },
        'css-loader'
      ]
    });
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        {
          loader: MiniCssExtractPlugin.loader,
        },
        'css-loader',
        'sass-loader'
      ]
    });
  } else {
    config.module.rules.push({
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    });
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    });
  }
  return config;
};

styles.scss由DetailView组件的index.jsx导入。

问题从未出现过。

我刚刚在该React App中创建了新组件DetailView。所有其他组件都遵循相同的约定：驻留在单独的文件夹中，该文件夹包含index.jsx，导入ONE styles.scss并导出{{1}中的一个Pure组件或一个Pure组件和connect()生成的组件。 }}程序包。