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

阅读 1.5k

推荐阅读
全栈工程师进阶
用户专栏

日常学习总结与分享,包括:前端、后台与运维,讲解的知识点包括:javascript、vuejs、reactjs、springb...

78 人关注
39 篇文章
专栏主页