处理样式资源
Css、Lss、Sass、Scss、Style,借助loader来解析样式资源
webpack官网 概念 | webpack 中文文档 | webpack 中文文档 | webpack 中文网
1. 处理Css资源
若没有安装css-loader,直接使用webpack打包时就会报错:
1. 安装css-loader: npm install --save-dev css-loader
2. 引入 .css 文件 import css from "file.css"
// 要想webpack打包资源,必须引入该资源
import './css/index.css'
3. 配置文件 webpack.config.js
// 加载器
module: {
rules: [
// css-loder的配置
{
test: /\.css$/, //只检测.css文件
//执行顺序:从右到左(从下到上)
use: [
"style-loader", //将js中css通过创建style标签添加到html文件中
"css-loader"], //将css资源编译成commonjs的模块到js中
},
]
},
运行npx webpack 时报错:
报错原因:官网只提供下载 css-loader,并未提供下载 style-loader,但在配置文件中却使用到style-loader,所以我们只需下载 style-loader 就可以解决这个问题了 npm i style-loader -D:
此时再次打包,编译成功:
2. 处理Less资源
1. 安装less-loader: npm install less less-loader --save-dev
2. 引入 .less 文件
import './less/index.less'
3. 配置文件 webpack.config.js
// 加载器
module: {
rules: [
// less-loder的配置
{
test: /\.less$/,
// use:可以使用多个loader, loader:只能使用一个loader
use: [
// compiles Less to CSS
'style-loader',
'css-loader',
'less-loader', //将js中less通过创建style标签添加到html文件中
],
},
]
},
4. webpack打包:npx webpack
3. 处理 Scss 和 Sass 资源
1. 安装 sass-loader: npm install sass-loader sass webpack --save-dev
2. 引入 .sass文件: import './style.scss' / import './style.sass'
3. 配置文件 webpack.config.js
module: {
rules: [
// sass-loader的配置
{
test: /\.s[ac]ss$/,
use: [
'style-loader', // 将 JS 字符串生成为 style 节点
'css-loader', // 将 CSS 转化成 CommonJS 模块
'sass-loader', // 将 Sass 编译成 CSS
],
},
]
},
4. webpack打包:npx webpack
4. 处理 stylus-loader
资源
1. 安装
stylus
和stylus-loader:
npm install stylus stylus-loader --save-dev
2. 引入.styl文件: import './stylus/index.styl'
3. 配置文件 webpack.config.js
module: {
rules: [
// stylus-loader的配置
{
test: /\.styl$/,
use: [
'style-loader',
'css-loader',
'stylus-loader', // 将 stylus 编译成 CSS
],
},
]
},
4. webpack打包:npx webpack