6. 使用 loader 處理 CSS 和 Sass · webpack 3 零基礎入門教程

# 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) 先說這么多吧。