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',
        }),
      ],
    },
    },