webpack中配置css-loader,style-loader解析css

2018.05.12 22:37 阅读 456 评论 0

webpack默认情况下是不能解析css文件及其他文件中的css。需要配置css-loaderstyle-loader

首先安装css-loaderstyle-loader依赖包。

css-loaderstyle-loader的区别是css-loader可以解析css样式,style-loader可以将解析后的css样式添加到页面中。

npm install css-loader style-loader -D

安装好css-loader及style-loader以后,然后在webpack配置文件webpack.config.js中配置loader。

module.exports = {
    // 其他配置省略
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
        exclude: /node_modules/
      }
    ]
  }
}
  • test用于匹配css结尾的文件。

  • use为一个数组,先以css-loader解析文件,然后以style-loader解析文件,配置中style-loader css-loader在数组中的顺序不可改变。

  • exclude为不包括node-modules目录,表示不编译解析node-modules目录中的文件。

0 条评论
发布