Question

我想在Bootstrap应用中使用create-react-app。我希望我的所有CSS都限定在各自的组件中（通过CSS modules），但我想将Bootstrap CSS应用于我的整个应用程序，以便标准控件看起来有点像更好。首先，我已经通过

安装了Bootstrap

npm install --save bootstrap

在我对stackoverflow进行了一些研究之后，我发现this answer并试图修改我的webpack.config.dev.js文件。它现在看起来像这样：

 {
        test: /\.css$/,
        exclude: '/node_modules/bootstrap/',
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              modules: true,
              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',
                }),
              ],
            },
          },
        ],
      },
      {
        // don't apply CSS modules to all .css files in node_modules/bootstrap
        test: /\.css$/,
        include: '/node_modules/bootstrap/',
        use: ['style-loader', 'css-loader']
      },

我正在Bootstrap CSS导入index.js，如此：

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

但是，Bootstrap CSS未应用。任何人都可以指出我的正确方向为什么会这样？我需要一个不同的配置我的webpack.config.dev.js文件吗？

如何在带有CSS模块的create-react-app应用程序中应用Bootstrap CSS

0 个答案: