Webpack4 配置 scss Loader
1.配置 scss Loader
SCSS 可以让你用更灵活的方式写 CSS。 它是一种 CSS 预处理器，语法和 CSS 相似，但加入了变量、逻辑、等编程元素。SCSS 又叫 SASS，区别在于 SASS 语法类似 Ruby，而 SCSS 语法类似 CSS，对于熟悉 CSS 的前端工程师来说会更喜欢 SCSS。
使用 SCSS 可以提升编码效率，但是必须把 SCSS 源代码编译成可以直接在浏览器环境下运行的 CSS 代码。 SCSS 官方提供了多种语言实现的编译器，由于本书更倾向于前端工程师使用的技术栈，所以主要来介绍下 node-sass。
node-sass 编译器核心模块是由 C++ 编写，再用 Node.js 封装了一层，以供给其它 Node.js 调用。
新建一个项目
|-- package.json
|-- src
| | `-- common.js
| | `-- index.html
| | `-- main.scss
| `-- main.js
`-- webpack.config.js
package.json
{
"name": "testcssloader",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"author": "liujun",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.0.0",
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.35.3",
"webpack-cli": "^3.3.6"
}
}
1.scripts 属性里编写了3个脚本：其中 dev 对应的脚本是 构建测试版；其中 build对应的脚本是 构建发布版
2.开发依赖了style-loader css-loader
node-sass sass-loaderwebpack webpack-cli
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist'),
},
module: {
rules: [
{
test: /\.scss$/,
// 注意:use 的别名 是 loaders。下面3个加载的执行顺序是 3 2 1
use: [
// 1.不用传递参数可以简写
'style-loader',
{
loader: 'css-loader',
// 2.给css-loader传递参数
options: {
url: true,
import: true
}
},
// 3.使用sass加载器
'sass-loader'
],
}
]
}
};
use接收一个数组，数组中可以存放字符串和对象，并且use的别名是 loaders。上面的use接收了3个加载器，加载器执行的顺序是：sass-loader -> css-loader -> style-loader
main.scss
// 这里使用 scss 的语法，定义了一个变量
$color: pink;
body {
background-color: $color;
}
main.js
// 1.通过 CommonJS 规范导入 showHelloWorld 函数
const showHelloWorld = require('./common.js');
// 2.执行 showHelloWorld 函数
showHelloWorld('Webpack的安装和使用');
// 3.通过 CommonJS 规范导入 SCSS 模块
require('./main.scss');
index.html
<html>
<head>
<meta charset="UTF-8">
head>
<body>
<div id="app">div>
<script src="../dist/bundle.js">script>
body>
html>
本地安装 webpack 和 用到的loader
npm install [email protected] --save-dev
npm install [email protected] --save-dev
npm install [email protected] --save-dev
npm install [email protected] --save-dev
npm install [email protected] --save-dev // 把 scss 编译成 css
npm install [email protected] --save-dev // 加载 scss 文件，把scss文件转成commonjs模块
在项目的根目录，执行脚本构建项目
npm run dev
打包后输出的结果
|-- dist
| |-- bundle.js
|-- node_modules
|-- package-lock.json
|-- package.json
|-- src
| |-- common.js
| |-- index.html
| |-- main.scss
| `-- main.js
`-- webpack.config.js
打包之后的 index.html 文件的部分内容：
<html><head>
<meta charset="UTF-8">
<style type="text/css">body {
background-color: pink; }
style>head>
<body>
<div id="app">div>
<script src="../dist/bundle.js">script>
body>html>
总结：
上面webpack.config.js配置中的use通过正则 /\.scss$/ 匹配所有以 .scss 为后缀的 SCSS 文件，再分别使用3个 Loader 去处理。具体处理流程如下：
- 通过 sass-loader 把 SCSS 源码转换为 CSS 代码，再把 CSS 代码交给 css-loader 去处理。
- css-loader 会找出 CSS 代码中的
@import和url()这样的导入语句，告诉 Webpack 依赖这些资源。同时还支持 CSS Modules、压缩 CSS 等功能。处理完后再把结果交给 style-loader 去处理。 - style-loader 会把 CSS 代码转换成字符串后，注入到 JavaScript 代码中去，通过 JavaScript 去给 DOM 增加样式。如果你想把 CSS 代码提取到一个单独的文件而不是和 JavaScript 混在一起，可以使 ExtractTextPlugin 插件。