加载 CSS 需要 css-loader 和 style-loader，他们做两件不同的事情，css-loader会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。
npm install --save-dev css-loader style-loader
//webpack中配置
module: {
loaders:[
{
test: /\.css$/, // Only .css files
loader: 'style!css' // Run both loaders
}
]
}
如果你想使用编译 CSS，这里有两种可用的加载器：sass-loader。下面是如何设置。
npm install --save-dev sass-loader
//webpack中配置
module: {
loaders:[
{
test: /\.scss$/,
loader: style!css!sass
}
]
}
这样在项目中就可以直接使用:import 'App.scss'
上面的配置，会直接在html页面生成style标签。不利用开发调试，所以一般会采用如下配置
npm install --save-dev autoprefixer-loader
//webpack中配置
module: {
loaders:[
{
test: /\.scss$/,
loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap'
}
]
}
加上 modules 即为启用，localIdentName 是设置生成样式的命名规则，详细说明:CSS Modules 详解及 React 中实践
autoprefixer 是一个自己添加前缀的插件。详见文档
react-bootstrap使用
安装loadernpm install --save-dev bootstrap-loader
安装依赖
# Bootstrap 3
npm install bootstrap-sass
# or Bootstrap 4
npm install bootstrap@v4.0.0-alpha.2
# Node SASS & other loaders needed to handle styles
npm install css-loader node-sass resolve-url-loader sass-loader style-loader url-loader
然后在webpack中配置
entry: [ 'bootstrap-loader/extractStyles', './app' ]
详见文档
