反应16.8中没有加载反应带样式

Question

工具：

反应16.8.3反应堆7.1.0

我按照这里的说明https://reactstrap.github.io/，但我仍然得到错误。我从他们的github页面知道了这个解决方案：

{ test: /\.css$/, loader: 'style-loader!css-loader' }

但该配置文件似乎已过时。我只收到这个错误：

Module not found: Can't resolve 'style-loader!css-loader'

这是我的webpack配置：

const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
  isEnvDevelopment && require.resolve('style-loader'),
  isEnvProduction && {
    loader: MiniCssExtractPlugin.loader,
    options: Object.assign(
      {},
      shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
    ),
  },
  {
    loader: 'style-loader!css-loader',
    options: cssOptions,
  },
  {
    // Options for PostCSS as we reference these options twice
    // Adds vendor prefixing based on your specified browser support in
    // package.json
    loader: require.resolve('postcss-loader'),
    options: {
      // Necessary for external CSS imports to work
      // https://github.com/facebook/create-react-app/issues/2677
      ident: 'postcss',
      plugins: () => [
        require('postcss-flexbugs-fixes'),
        require('postcss-preset-env')({
          autoprefixer: {
            flexbox: 'no-2009',
          },
          stage: 3,
        }),
      ],
      sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
    },
  },
].filter(Boolean);

{
   test: cssRegex,
   exclude: cssModuleRegex,
   use: getStyleLoaders({
            importLoaders: 1,
            modules: true,
            localIdentName: '[name]__[local]__[hash:base64:5]',
            sourceMap: isEnvProduction
              ? shouldUseSourceMap
              : isEnvDevelopment,
          }),
          // Don't consider CSS imports dead code even if the
          // containing package claims to have no side effects.
          // Remove this when webpack adds a warning or an error for this.
          // See https://github.com/webpack/webpack/issues/6571
          sideEffects: true,
        }

Answer 1

（我没有足够的声誉来为你的问题添加评论）

好吧，我想启用CSS模块，所以我最终做到了这一点。我花了一段时间才弄清楚新版本。成功弹出后，只需编辑webpack.config.js文件并添加两行代码（查看下面的代码）

....
....
{
          test: cssRegex,
          exclude: cssModuleRegex,
          use: getStyleLoaders({
            importLoaders: 1,

            modules: true, // add this line 
            localIdentName: "[name]__[local]__[hash:base64:5]", // add this line too

            sourceMap: isEnvProduction
              ? shouldUseSourceMap
              : isEnvDevelopment
          }),
....
....

一些更多的图片如何使用CSS加载器：

我的Layout.css文件：

我的Layout.js文件：