一、webpack只能运行JavaScript和json文件，这个是webpack自带的能力。loader能让webpack能够处理其他类型的文件（比如css文件，图片类型等），如果想要打包CSS，需要安装css-loader
1.下载css-loader
cnpm install --save-dev css-loader@6.7.1
---如果在package.json中有注释"css-loader": "^6.7.1",说明安装成功
2.修改 webpack.config.js 配置文件
module:{
rules:[
{
//找到所有需要解析的css文件
test: /\.css$/,
//执行css-loader,解析css文件
use:['css-loader']
}
]
}
3.在 index.js 文件中引入CSS文件: import "./css/index.css"
4.此时运行会发现，css样式让然是无法加载的，因为 css-loader 只是能识别css文件.要显示css样式还需要引入 style-loader才可以
5.安装 style-loader
cnpm install --save-dev style-loader@3.3.1
------如果在package.json中有注释"less-loader": "^11.0.0",说明安装成功
6.修改配置
修改 webpack.config.js 配置文件
const path = require('path');
module.exports = {
module:{
rules:[
{
test: /\.css$/,
use: ["style-loader",'css-loader']
}
]
}
};
注意：style-loader和css-loader是存在先后顺序的，必须先写style-loader在写css-loader
二、Webpack中使用Loader_处理Less文件
1.需要安装less和less-loader两个包
cnpm instal --save-dev less@4.1.3 less-loader@11.0.0;
------如果在package.json中有注释"less-loader": "^11.0.0"和"less": "^4.1.3",说明安装成功
2.修改 webpack.config.js 配置文件
module.exports = {
module: {
rules: [
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
]
}
};
3.增加 less 文件引入到项目中
import "../src/css/style.less"
784
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
