6使用 loader 處理 CSS 和 Sass

時間 2019-11-16

標籤使用 loader 處理 css sass 欄目 CSS 简体版

原文原文鏈接

1. 什麼是 loader

官方的解釋是這樣的：javascript

loader 用於對模塊的源代碼進行轉換。loader 可使你在 import 或"加載"模塊時預處理文件。所以，loader 相似於其餘構建工具中「任務(task)」，並提供了處理前端構建步驟的強大方法。loader 能夠將文件從不一樣的語言（如 TypeScript）轉換爲 JavaScript，或將內聯圖像轉換爲 data URL。loader 甚至容許你直接在 JavaScript 模塊中 import CSS文件！css

可能會一臉懵懂吧。html

說白了，就是 loader 相似於 task，可以處理文件，好比把 Scss 轉成 CSS，TypeScript 轉成 JavaScript 等。前端

再不明白的話，仍是用實例來講明吧。（其實它的概念並不重要，你會用就行）java

2. 用 css-loader 和 style-loader 處理 CSS

如今咱們來演示一下如何用 loader 來處理 CSS 文件。node

先準備好內容。webpack

src/app.cssgit

body {
  background: pink;
}
複製代碼

src/app.jsgithub

import css from './app.css';

console.log("hello world");
複製代碼

若是你如今運行 npm run dev 或 webpack 命令，就會出現相似下面的提示錯誤。web

意思就是說，默認狀況下，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

編譯出的內容跟以前的差很少。

咱們用瀏覽器打開 dist/index.html 文件。

編譯出的 app.bundle.js 文件是有包含 CSS 的內容的。

3. 用 sass-loader 把 SASS 編譯成 CSS

應該都知道 SASS 是什麼吧，不懂的話能夠查一下。

說白了，就是能夠用更好的語法來寫 CSS，好比用嵌套。看下面的例子應該就會理解的。

把 src/app.css 更名爲 src/app.scss

src/app.scss

body {
  background: pink;
  p {
    color: red;
  }
}
複製代碼

src/index.html

<!DOCTYPE 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' ]
      }
    ]
  }
};
複製代碼

效果以下：

4. 用 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

先說這麼多吧。

相關標籤/搜索

webpack3+postcss+sass+css

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。