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

在SSR中的使用

请注意，Next.js无法使用css-loader。 请参阅官方页面上的警告https://github.com/zeit/next.js/#customizing-webpack-config

警告：不建议添加加载程序以支持新的文件类型（css，less，svg等），因为只有客户端代码通过webpack捆绑在一起，因此在初始服务器渲染中不起作用。 Babel插件是一个不错的选择，因为它们在服务器/客户端渲染之间一致地应用

nextjs-starter-kit原文阅读

参考：

nextjs-starter-kit
webpack loaders
关于sass（scss）、less、postcss、stylus等的用法与区别
对postcss以及less和sass的研究
PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用
Webpack 之 css-Loader 详解
webpack4配置之——06：配置样式-css、postcss、scss、less