八、CSS工程化

CSS工程化

• 组织
• 优化
• 构建
• 维护

PostCSS

• 介绍

  • PostCSS本身只有解析能力
  • 各种神奇的特性全靠插件

  • 目前至少有200多个插件

    
    

• 常见插件

  • import 模块合并
  • autoprefixer 自动加前缀
  • cssnano 压缩代码
  • cssnext 使用css新特性,类似es6使用的bulb
  • precss变量、mixin、循环等

• postcss有自己的脚手架

npm install postcss-cli
./node_modules/.bin/postcss test.css -o test2.css

在postcss.config.js文件中引入插件
const autoprefixer = require('autoprefixer');
module.exports={
    plugins:[
        autoprefixer({
            browerse:['Firefox > 1']// 浏览器BrowserList
        })
    ]
}

• PostCSS支持的构建工具
  • cli 命令行工具
  • webpack postcss-loader
  • gulp gulp-postcss
  • grunt grunt-postcss
  • rollup rollup-postcss

webpack

• 核心思想
  • JS是整个应用的核心
  • 一切资源均有JS管理依赖
  • 一切资源均有webpack打包

npm install webpack
webpack test.js test1.js

• webpack处理css

在js文件中require(xxx.css)；
npm install css-loader style-loader
// css-loader 将css文件变为js文件
// style-loader 将JS样式插入head
在webpack.config.js中
module.exports = {
    module:{
        rule:[{
            test:/\.css$/,
            use:['style-loader','css-loader']
        }]
    }
}

• css-modules和extract-text-plugin

  • css-modules 避免组件样式产生冲突，实现组件样式封装

  module.exports = {
      module:{
          rule:[{
              test:/\.css$/,
              use:['style-loader',{
                  loader:'css-loader',
                  options:{
                      modules:true
                  }
              }]
          }]
      }
  }
  
  在js中
  var style =require（test.css）
  <div class='red'></div>=>改为<div class=style.red></div>
  

  • extract-text-plugin

  Plugins:new ExtractTextPlugin('xxx.css')
  

  将CSS从JS中提取出来，样式通过css来加载，而不是将css变成js文件!