webpack_处理样式

02_处理样式

webpack本身不会识别样式资源,所以需要借助loader

css-loader

首先,你需要先安装 css-loader:

[precode]npm i -D css-loader style-loader[/precode]

然后把 loader 引用到你 webpack 的配置中。如下所示:

main.js

[precode]import css from "./index.css";
import from './index.css'[/precode]

webpack.config.js
[precode]module: {
rules : [
{
test:/\.css$/i,//只检测css文件,
use:[ //从右到左,从下到上
"style-loader", //通过创建style标签的形式创建到页面标签中
"css-loader" //将样式编译成到JS文件中
]
}
]
}[/precode]

sass-loader

首先,你需要安装 sass-loader

[precode]npm install sass-loader sass webpack --save-dev[/precode]

然后将本 loader 添加到你的 Webpack 配置中。例如:
[precode]rules: [
{
test: /\.s[ac]ss$/i,
use: [
// 将 JS 字符串生成为 style 节点
'style-loader',
// 将 CSS 转化成 CommonJS 模块
'css-loader',
// 将 Sass 编译成 CSS
'sass-loader',
],
},
][/precode]
梓旭梓旭
THE END
分享
二维码
< <上一篇
下一篇>>