# 6. 使用 loader 处理 CSS 和 Sass ## 1. 什么是 loader 官方的解释是这样的: > loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件! 可能会一脸懵懂吧。 说白了,就是 `loader` 类似于 task,能够处理文件,比如把 Scss 转成 CSS,TypeScript 转成 JavaScript 等。 再不明白的话,还是用实例来说明吧。(其实它的概念并不重要,你会用就行) ## 2. 用 [css-loader](https://github.com/webpack-contrib/css-loader) 和 [style-loader](https://github.com/webpack-contrib/style-loader) 处理 CSS 现在我们来演示一下如何用 `loader` 来处理 CSS 文件。 先准备好内容。 **src/app.css** ``` body { background: pink; } ``` **src/app.js** ``` import css from './app.css'; console.log("hello world"); ``` 如果你现在运行 `npm run dev` 或 `webpack` 命令,就会出现类似下面的提示错误。 ![](https://box.kancloud.cn/dfdf436f72b9e1af14ac095c1e2283c7_1066x392.png) 意思就是说,默认情况下,`webpack` 处理不了 CSS 的东西。 我们来处理这个问题。 ``` $ npm install --save-dev css-loader style-loader ``` **webpack.config.js** ``` var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/app.js', output: { path: __dirname + '/dist', filename: 'app.bundle.js' }, plugins: [new HtmlWebpackPlugin({ template: './src/index.html', filename: 'index.html', minify: { collapseWhitespace: true, }, hash: true, })], module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] } }; ``` 我们来看下效果: **dist/index.html** ![](https://box.kancloud.cn/fe0bba903a190b1265f4885249649fb2_1160x99.png) 编译出的内容跟之前的差不多。 我们用浏览器打开 `dist/index.html` 文件。 ![](https://box.kancloud.cn/3ca72a1bfbe2d853ed6d0cf0650c4513_1062x642.png) 编译出的 `app.bundle.js` 文件是有包含 CSS 的内容的。 ![](https://box.kancloud.cn/8425eca0134233b09639638d0d74f2a9_1057x641.png) ## 3. 用 [sass-loader](https://github.com/webpack-contrib/sass-loader) 把 SASS 编译成 CSS 应该都知道 SASS 是什么吧,不懂的话可以查一下。 说白了,就是可以用更好的语法来写 CSS,比如用嵌套。看下面的例子应该就会理解的。 把 `src/app.css` 改名为 `src/app.scss` **src/app.scss** ``` body { background: pink; p { color: red; } } ``` **src/index.html** ``` <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> <p>hello world</p> </body> </html> ``` **src/app.js** ``` import css from './app.scss'; console.log("hello world"); ``` 安装(中间可能要下载二进制包,要耐心等待) ``` $ npm install sass-loader node-sass --save-dev ``` **webpack.config.js** ``` var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/app.js', output: { path: __dirname + '/dist', filename: 'app.bundle.js' }, plugins: [new HtmlWebpackPlugin({ template: './src/index.html', filename: 'index.html', minify: { collapseWhitespace: true, }, hash: true, })], module: { rules: [ { test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ] } ] } }; ``` 效果如下: ![](https://box.kancloud.cn/0afd61616a015744096cb4914d0bfe26_982x662.png) ## 4. 用 [extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) 把 CSS 分离成文件 有时候我们要把 SASS 或 CSS 处理好后,放到一个 CSS 文件中,用这个插件就可以实现。 ``` $ npm install --save-dev extract-text-webpack-plugin ``` **webpack.config.js** ``` var HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: './src/app.js', output: { path: __dirname + '/dist', filename: 'app.bundle.js' }, plugins: [new HtmlWebpackPlugin({ template: './src/index.html', filename: 'index.html', minify: { collapseWhitespace: true, }, hash: true, }), new ExtractTextPlugin('style.css') ], module: { rules: [ { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', //resolve-url-loader may be chained before sass-loader if necessary use: ['css-loader', 'sass-loader'] }) } ] } }; ``` 在 `dist` 目录下生成了 `style.css` 文件。 **dist/style.css** ``` body { background: pink; } body p { color: red; } ``` **dist/index.html** ![](https://box.kancloud.cn/921287859e50295f312fe82af197722a_1152x96.png) 先说这么多吧。