Scss-Loader
自动将 scss 转换为 CSS。
使用 Scss-Loader
安装 Scss
npm install --save-dev node-sass
安装 Sess-loader
npm install --save-dev sass-loader
配置 Sess-Loader
修改 webpack 核心配置文件不在一一介绍了前面介绍过了,添加规则内容如下。
module.exports = {
module: {
rules: [
// 打包SCSS规则
{
test: /\.scss$/,
use: [{
// 将 JS 字符串生成为 style 节点
loader: "style-loader"
}, {
// 将 CSS 转化成 CommonJS 模块
loader: "css-loader"
}, {
// 将 Sass 编译成 CSS
loader: "sass-loader"
}]
}
]
}
};
注意点
因为 Loader 是从右至左从下至上,所以必须先由 Sass-Loader 处理完后才能交给其他 Loader 进行处理。
新建一个 scss 文件 index.scss
内容如下所示:
body {
width: 100%;
height: 100%;
background: skyblue;
img {
height: 400px;
border: 1px solid #00f;
}
}
修改 index.js,如下所示:
import icon from "./index.jpg";
import "./index.scss"
let oImg = document.createElement("img");
oImg.src = icon;
oImg.setAttribute("class", "size");
document.body.appendChild(oImg);
使用 webpack 进行打包,然后再 HTML 中引入打包之后的文件,浏览器中查看效果如下所示: