less、sass和postcss總結

時間 2019-12-20

標籤 sass postcss 總結简体版

原文原文鏈接

less 和 less-loader

Less 2009年開源的一個項目，受Sass的影響較大，但又使用CSS的語法，讓大部分開發者和設計師更容易上手。LESS提供了多種方式能平滑的將寫好的代碼轉化成標準的CSS代碼。使用JavaScript編譯器進行編譯Less擴展了 CSS 語言，增長了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。Less 能夠運行在 Node 或瀏覽器端。
less-loader: 將Less編譯成 CSS

安裝：javascript

npm install --save-dev less-loader less

使用：css

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // 將CSS轉換爲CommonJS
            }, {
                loader: "less-loader" // 將 Less 轉換爲 CSS
            }]
        }]
    }
};

sass 和 sass-loader

Sass是一種動態樣式語言，Sass語法屬於縮排語法，比css比多出好些功能(如變量、嵌套、運算,混入(Mixin)、繼承、顏色處理，函數等)，更容易閱讀。
sass-loader: 加載SASS / SCSS文件並將其編譯爲CSS。

安裝：html

npm install sass-loader node-sass webpack --save-dev

使用：前端

// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [{
      test: /\.scss$/,
      use: [{
          loader: "style-loader" // 將 JS 字符串生成爲 style 節點
      }, {
          loader: "css-loader" // 將 CSS 轉化成 CommonJS 模塊
      }, {
          loader: "sass-loader" // 將 Sass 編譯成 CSS
      }]
    }]
  }
};

Sass 和 Scss是什麼關係?

Sass的縮排語法，對於寫慣css前端的web開發者來講很不直觀，也不能將css代碼加入到Sass裏面，所以sass語法進行了改良，Sass3就變成了Scss(sassy css)。與原來的語法兼容，只是用{}取代了原來的縮進。java

postcss 和 postcss-loader

PostCSS 的主要功能只有兩個：node
- 第一個就是前面提到的把 CSS 解析成 JavaScript 能夠操做的抽象語法樹結構（Abstract Syntax Tree，AST）
- 第二個就是調用插件來處理 AST 並獲得結果。

PostCSS 通常不單獨使用， 而是與已有的構建工具進行集成。PostCSS 與主流的構建工具，如 Webpack完成集成以後，選擇知足功能需求的 PostCSS 插件並進行配置。webpack

postcss-loader: 用PostCSS處理CSS

安裝：git

npm i -D postcss-loader

使用：
postcss.config.jsgithub

module.exports = {
  parser: 'sugarss',
  plugins: {
    'postcss-import': {},
    'postcss-cssnext': {},
    'cssnano': {}
  }
}

更多配置web

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'postcss-loader'
        ]
      }
    ]
  }
}

css-loader 和 style-loader

css-loader: css-loader 解釋 @import 和 url() ，會 import/require() 後再解析它們。
style-loader: 經過注入<style>標籤將CSS添加到DOM，建議將 style-loader 與 css-loader 結合使用。

安裝：

npm install --save-dev css-loader style-loader

使用：

{
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      }
    ]
  }
}

注意：使用style-loader進行處理，位置必須在css-loader前面

PostCSS和Sass、LESS一塊兒使用

若是你喜歡使用PostCSS，但又不想拋棄你最喜歡的預處理器。不用擔憂，你不須要做出二選一的選擇，你能夠把PostCSS和預處理器(Sass、LESS)結合起來使用。

{
  module: {
    rules: [
       {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1
            }
          },
          {
            loader: "postcss-loader"
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 2
            }
          },
          {
            loader: "postcss-loader"
          },
          {
            loader: "sass-loader",
            options: {}
          }
        ]
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1
            }
          },
          {
            loader: "postcss-loader"
          },
          {
            loader: "less-loader",
            options: {
              javascriptEnabled: true
            }
          }
        ]
      }
    ]
  }
}