webpack-loader装载器之css-less-sass的配置使用

为什么需要装载器

• webpack只是支持js和json,对于css，less这种不支持，需要使用loader去转换

目录如下

• src下的index.js引入index.css

 console.log("aaaa");
console.log("bbbb");
import "./index.css"

• npx 打包，可以看到需要一种loader装载器
  

(1) loader装载器处理css lesss 和sass

** 1：下载 (yarn add -D css-loader style-loader)**

• 配置如下

   // 装载器配置
  module:{
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader','css-loader'] // 顺序是从右到左
      }
    ]
  },

npx webpack,可以看到完全支持了css

2： 如果需要支持less，需要我们下载less less-loader

1: index.js
console.log("aaaa");
console.log("bbbb");
import "./index.css"
require("./main.less")
2: webpack.config.js
   module:{
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader','css-loader','less-loader'] // less顺序是从右到左，从下到上
      }
    ]
  },

npx webpack,可以看到我们的less文件也支持了

3 如果支持sass 需要我们下载 yarn add -D node-sass sass-loader

1: index.js
console.log("aaaa");
console.log("bbbb");
import "./index.css"
require("./main.less")
require("./other.scss")
2: webpack.config.js
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader','css-loader','sass-loader'] // sass顺序是从右到左，从下到上
      },
    ]

npx webpack,可以看到我们的sass文件也支持了