导入处理css、less、scss的第三方loader

原因：webpack只能打包处理JS类型的文件，无法处理其他非JS类型的文件；

如果要处理其他类型文件，需要手动安装一些 第三方loader 加载器；

配置处理css样式表的第三方loader

1.如果要处理css文件，需要安装 cnpm i style-loader css-loader -D两个插件

2.打开webpack.config.js这个配置文件，在里面，新增一个 配置节点，叫做module，他是一个对象；

在上面有一个rules属性，是个数组，存放了所有第三方文件的匹配和处理规则

3.在rules数组里加入 {test:/\.css$/,use:['style-loader','css-loader']} 

module:{
      rules:[
          {test:/\.css$/,use:['style-loader','css-loader']}  //处理配置css文件的第三loader
      ]
}

4.在main.js里导入css文件

import './css/index.css'

 

配置less第三方loader：

1.安装less-loader和less

cnpm i less-loader -D

cnpm i less -D

2.在module的rules里加入配置信息

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

 

 

配置scss第三方loader：

1.安装sass-loader和node-sass

cnpm i sass-loader -D

cnpm i node-sass -D

2.在module的rules里加入配置信息

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