webpack解析resolve

以bootstrap为例

npm install bootstrap  -D

index.js

import 'bootstrap/dist/css/bootstrap.css'

报错

ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css 7:0
Module parse failed: Unexpected token (7:0)
You may need an appropriate loader to handle this file type.
|  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|  */
> :root {
|   --blue: #007bff;
|   --indigo: #6610f2;
 @ ./src/index.js 22:0-42
 @ multi (webpack)-dev-server/client?http://localhost:8081 ./src/index.js

这是因为bootstrap 4.0的css引入了新的特性，CSS Variables

安装 npm install postcss-custom-properties --save-dev

配置webpack.config.js

{
    test: /\.css$/,
    use: ['style-loader', 'css-loader', {
        loader: 'postcss-loader',
        options: {
            plugins: (loader) => [
                require("postcss-custom-properties")
            ]
        }
    }]
}