webpack css-loader style-loader scss-loader cssloader模块化

1、webpack-css-loader(打包CSS)

(1)css-loader使用

①　安装cssloader

npm install --save-dev css-loader

②　安装styleloader

npm install style-loader --save-dev

③　配置css-loader

 {
      test:/\.css$/,
      use:['style-loader','css-loader']
 }

(2)css-loader和style-loader作用

css-loader: 解析css文件中的@import依赖关系。
style-loader: 将webpack处理之后的内容插入到HTML的HEAD代码中。

(3)loader特点

①　单一原则, 一个loader只做一件事情
②　多个loader会按照从右至左, 从下至上的顺序执行
例如: 从右至左

  [ 'style-loader', 'css-loader' ]

先执行css-loader解析css文件关系拿到所有内容,
再执行style-loader将内容插入到HTML的HEAD代码中

2、webpack-less-loader-打包less

(1)less-loader

自动将less转换为CSS.

(2)less-loader使用:

①　安装less

npm install --save-dev less

②　安装less-loader

npm install --save-dev less-loader

③　配置less-loader

{
      test: /\.less$/,
      use: [{
              loader: "style-loader" // creates style nodes from JS strings
           }, {
               loader: "css-loader" // translates CSS into CommonJS
           }, {
               loader: "less-loader" // compiles Less to CSS
       }]
}

3、webpack-scss-loader-打包scss

(1)scss-loader

自动将scss转换为CSS

(2)scss-loader使用:

①　安装scss

npm install --save-dev node-sass

②　安装scss-loader

npm install --save-dev sass-loader

③　配置less-loader

 {
      test: /\.scss$/,
      use: [{
             loader: "style-loader" // 将 JS 字符串生成为 style 节点
            }, {
              loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
             }, {
                loader: "sass-loader" // 将 Sass 编译成 CSS
         }]
}

4、webpack-cssloader模块化

默认情况下通过import "./xxx.css"导入的样式是全局样式，也就是只要被导入, 在其它文件中也可以使用，如果想要导入的CSS文件只在导入的文件中有效, 那么就需要开启CSS模块化：

 {
    loader: "css-loader",
     options: {
         modules: true
     }
},

然后在导入的地方通过 import xxx from "./xxx.css"导入
然后在使用的地方通过 xxx.className方式使用即可

import className from '../css/index.css';
oImg.setAttribute('class', className.size);