如何在引导程序中使用CSS模块？

Question

当我使用此webpack配置时，它显示错误，可能的原因是什么以及如何解决该错误。是否是由于webpack版本导致的错误，您能否告诉您如何为此编写webpack配置。 / p>

  

当我使用此webpack配置时，它显示错误，可能是什么   这个错误的可能原因以及解决方法   由于webpack版本，如果不能，你能告诉怎么写webpack配置   为此。

@ ./src/components/Routes/Routes.js
 @ ./src/app.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./src/app.js

ERROR in ./src/components/SignIn/sign.css
Module build failed: Unknown word (5:1)

  3 | // load the styles
  4 | var content = require("!!../../../node_modules/css-loader/index.js?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!../../../node_modules/postcss-loader/lib/index.js??postcss!./sign.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
    | ^
  6 | // Prepare cssTransformation
  7 | var transform;
  8 |

 @ ./src/components/SignIn/SigninForm.js 25:0-21
 @ ./src/components/SignIn/SigninPage.js
 @ ./src/components/Routes/Routes.js
 @ ./src/app.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./src/app.js

ERROR in ./node_modules/video-react/dist/video-react.css
Module build failed: Unknown word (5:1)

  3 | // load the styles
  4 | var content = require("!!../../css-loader/index.js?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!../../postcss-loader/lib/index.js??postcss!./video-react.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
    | ^
  6 | // Prepare cssTransformation
  7 | var transform;
  8 |

 @ ./src/components/Image/PlayerContent.js 17:0-65
 @ ./src/components/Image/ImagePage.js
 @ ./src/components/Routes/Routes.js
 @ ./src/app.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./src/app.js
webpack: Failed to compile.

// webpack.config

const path = require('path');
    const webpack = require('webpack');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    const autoprefixer = require('autoprefixer')

    module.exports = (env) => {
      // const CSSExtract = new ExtractTextPlugin('styles.css');
      // const BootstrapExtract = new ExtractTextPlugin('bootstrap.css');
      return {
        entry: ['babel-polyfill', './src/app.js'],
        output: {
          path: path.join(__dirname, 'public', 'dist'),
          filename: 'bundle.js'
        },
        module: {
          rules: [
            {
              loader: 'babel-loader',
              test: /\.js$/,
              exclude: /node_modules/
            },
            {
              test: /\.s?css$/,
              use: [
                {
                  loader: 'css-loader',
                  options: {
                    sourceMap: true,
                    modules: true,
                    localIdentName: '[name]__[local]___[hash:base64:5]',
                    camelCase: true
                  }
                },
                {
                  loader: 'sass-loader',
                  options: {
                    sourceMap: true,
                    modules: true,
                    localIdentName: '[name]__[local]___[hash:base64:5]',
                    camelCase: true
                  }
                }
              ]
            },
            {
              test: /(\.bootstrap\.css$|bootstrap-theme.css|bootstrap.css)/,
              use: [
                {
                  loader: 'style-loader',
                },
                {
                  loader: 'css-loader',
                  options: {
                    minimize: true || {/* CSSNano Options */ }
                  }
                },
              ],
            },
            {
              test: /^((?!\.bootstrap|bootstrap-theme).)*\.css$/,
              use: [
                {
                  loader: 'style-loader',
                },
                {
                  loader: 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
                },
                {
                  loader: require.resolve('postcss-loader'),
                  options: {
                    // Necessary for external CSS imports to work
                    // https://github.com/facebookincubator/create-react-app/issues/2677
                    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',
                      }),
                    ],
                  },
                }
              ]
            },
            {
              test: /\.(jpg|png|svg|gif|ttf|eot|woff|woff(2))$/,
              use: [
                {
                  loader: 'file-loader',
                }
              ]
            }
          ]
        },
        plugins: [
          new webpack.DefinePlugin({
            'process.env.NODE_ENV': process.env.NODE_ENV
          })
        ],
        devtool: 'source-map',
        devServer: {
          contentBase: path.join(__dirname, 'public'),
          historyApiFallback: true,
          publicPath: '/dist/'
        }
      };
    };