sass和postcss

sass是css预处理器

需要安装node-sass支持 核心是c++编写

集成

1. sass-loader 把scss装换成css
2. css-loader 找出@import和url()导入的语法，告诉webpack依赖的资源。同时支持css modules、压缩css等
3. style-loader 把css转换成字符串，注入到javascript里。单独提出ExtractTextPlugin

PostCSS是更纯粹地对css本身做转换，在css之后来处理，利用插件类似gulp里的task

PostCSS的简要原理

PostCSS自身只包括css分析器，css节点树API，source map生成器以及css节点树拼接器

插件预览

Autoprefixer 自动前缀
postcss-cssnext 新的特性等等

与webpack集成

{
    loader: require.resolve('postcss-loader'),
    options: {
      ident: 'postcss', 
      plugins: () => [
        require('postcss-flexbugs-fixes'),
        autoprefixer({
          browsers: [
            '>1%',
            'last 4 versions',
            'Firefox ESR',
            'not ie < 9', // React doesn't support IE8 anyway
          ],
          flexbox: 'no-2009',
        }),
      ],
    },
    },

转载于:https://www.cnblogs.com/chenjinxinlove/p/8467770.html