npm | loader style-loader和css-loader

对于 css 模块，常处理的 loader 为

style-loader
css-loader

webpack是用JS写的，运行在node环境，所以默认webpack打包的时候只会处理JS之间的依赖关系！！！

因为像 .css 这样的文件不是一个 JavaScript 模块，你需要配置 webpack 使用 css-loader 或者 style-loader 去合理地处理它们。

css-loader用来处理js文件中引入的css模块（处理@import和url()）。

style-loader是将css-loader打包好的css代码以<style>标签的形式插入到html文件中。

调用顺序

css-loader
style-loader

如果在JS中导入了css，那么就需要使用 css-loader 来识别这个模块，通过特定的语法规则进行转换内容最后导出。

css-loader 处理的结果是一个数组，并不能直接使用，所以还需要一个 style-loader。

style-loader 是通过一个JS脚本创建一个style标签，里面包含一些样式。style-loader是不能单独使用的，应为它并不负责解析 css 之前的依赖关系，每个loader的功能都是单一的，各自拆分独立。

用法

module.exports = {
// ...
    module: {
      rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
                        modules: true
                     }
          }
    	]
      }
    ]
    }
  }

相关参数

ps:

可以配合的插件有

mini-css-extract-plugin