没有载入react 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文件：

​

​