less、sass和postcss总结

less 和 less-loader

• Less 2009年开源的一个项目，受Sass的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手。LESS提供了多种方式能平滑的将写好的代码转化成标准的CSS代码。使用JavaScript编译器进行编译Less扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。
• less-loader: 将Less编译成 CSS

安装：

npm install --save-dev less-loader less

使用：

// 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。

安装：

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)。与原来的语法兼容，只是用{}取代了原来的缩进。

postcss 和 postcss-loader

• PostCSS 的主要功能只有两个：

  • 第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的 抽象语法树结构（Abstract Syntax Tree，AST）
  • 第二个就是调用插件来处理 AST 并得到结果。

PostCSS 一般不单独使用， 而是与已有的构建工具进行集成。PostCSS 与主流的构建工具，如 Webpack完成集成之后，选择满足功能需求的 PostCSS 插件并进行配置。

• postcss-loader: 用PostCSS处理CSS

安装：

npm i -D postcss-loader

使用：
postcss.config.js

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

更多配置

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: 通过注入