CSS与SASS在webpack中的使用

加载 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' ]
详见文档