六：处理SCSS
这节课以 SCSS 为例，讲解如何在webpack中编译这种 CSS 预处理语言，并配合CSS的 LOADER 来进行组合处理。一些更复杂的应用，请翻看《webpack处理 CSS》这篇文章。
1. 准备工作
为了方便叙述，这次代码目录的样式文件只有一个scss文件，以帮助我们了解核心 LOADER 的使用。
下图展示了这次的目录代码结构：
这次我们需要用到node-sass，sass-loader等 LOADER，package.json如下：
{
"devDependencies": {
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"node-sass": "^4.9.2",
"sass-loader": "^7.0.3",
"style-loader": "^0.21.0",
"webpack": "^4.16.0"
}
}其中，base.scss代码如下：
$bgColor: red !default;
*,
body {
margin: 0;
padding: 0;
}
html {
background-color: $bgColor;
}index.html代码如下：
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Documenttitle>
head>
<body>
<script src="./dist/app.bundle.js">script>
body>
html>2. 编译打包scss
首先，在入口文件app.js中引入我们的 scss 样式文件：
import "./scss/base.scss";下面，开始编写webpack.config.js文件:
const path = require("path");
module.exports = {
entry: {
app: "./src/app.js"
},
output: {
publicPath: __dirname + "/dist/",
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js"
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: "style-loader" // 将 JS 字符串生成为 style 节点
},
{
loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
},
{
loader: "sass-loader" // 将 Sass 编译成 CSS
}
]
}
]
}
};需要注意的是，module.rules.use数组中，loader 的位置。根据 webpack 规则：放在最后的 loader 首先被执行。所以，首先应该利用sass-loader将 scss 编译为 css，剩下的配置和处理 css 文件相同。
3. 检查打包结果
因为 scss 是 css 预处理语言，所以我们要检查下打包后的结果，打开控制台，如下图所示：
同时，对于其他的 css 预处理语言，处理方式一样，首先应该编译成 css，然后交给 css 的相关 loader 进行处理。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-08-18，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录