React-将Bootstrap与CSS模块一起全局使用 [英] React - Use Bootstrap globally with css modules

问题描述

反应还很新，还有所有这些东西，所以我在这里需要一些帮助.我最近添加了 https://github.com/gajus/babel-plugin-我的项目的react-css-modules 插件.经过一些麻烦后，我开始使用它，因此现在可以将本地CSS文件与组件一起使用.到目前为止一切顺利.

Pretty new to react and all that stuff, so I need some help here. I recently added the https://github.com/gajus/babel-plugin-react-css-modules plugin to my project. After some troubles I got it to work, so I can now use my local css files with my components. So far so good.

不是，我不想为整个应用程序添加引导程序.在我添加css-modules插件之前，它就起作用了.

Not I would like to add bootstrap for the whole application. It worked before I added the css-modules plugin...

这是我的代码的相关部分(我想...如果我错过了让我知道的东西):

Here's are the relevant parts of my code (I guess... if I miss something let me know):

index.js(我的应用程序的入口):

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

.babelrc:

{
    "presets": [
        "react"
    ],
    "plugins": [
      ["react-css-modules", {
        "exclude": "node_modules"
      }]
    ]
}

webpack.config.js :

/* webpack.config.js */

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  devtool: 'eval',

  entry: [
    path.resolve('src/index.js'),
  ],

  output: {
    path: path.resolve('build'),
    filename: 'static/js/bundle.js',
    publicPath: '/',
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: path.resolve('src'),
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[path]___[name]__[local]___[hash:base64:5]', // Add naming scheme
            },
          },
        ],
      },

    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: path.resolve('src/index.html'),
    }),
  ],
}

欢迎任何建议.谢谢您的时间.

Any advise is welcome. Thank you for your time.

哦，顺便说一句:我也想将scss引入我的应用程序，但我还不知道该怎么做(还没有做过任何研究，但是如果你们中的某人知道如何做并且愿意解释的话)那，我真的很感激……不知道它是否有很大的变化).

Oh btw: I would also like to introduce scss to my application, I don't know how to do that yet (haven't done any researches, but if someone of you knows how to do it and is open to explain that, I would really appreciate it... don't know if its a big change).

我完全忘了添加我的组件:

I totally forgot to add my component:

import React, { Component } from "react";
import { Switch, Route, withRouter } from "react-router-dom";
import './style.css';

export default class HomeContainer extends Component {
  constructor() {

    super();
  }
  /* Test */
  render() {
    return (
      <div styleName="title">
        This woorks (styleprops from "title" are appliced"
        <button type="button" className="btn btn-primary">Primary</button> // Doesn't style the button :(
      </div>
    );
  }
}

推荐答案

我自己找到了解决方案.会在这里发布，也许有一天有人会需要它:

I found the solution by myself. Gonna post it here, may someone will need it one day:

在webpack配置中定义两个规则:

Define two rules in the webpack config:

{
  test: /\.css$/,
  exclude: /node_modules/,
  use: [
    'style-loader', {
      loader: 'css-loader',
      options: {
        importLoaders: 2,
        modules: true,
        localIdentName: '[path]___[name]__[local]___[hash:base64:5]', // Add naming scheme
      },
    },
  ],
},

// Second CSS Loader, including node_modules, allowing to load bootstrap globally over the whole project.
{
  test: /\.css$/,
  include: /node_modules/,
  use: ['style-loader', 'css-loader']
}

这篇关于React-将Bootstrap与CSS模块一起全局使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！