css的编译与处理 - 《网易微专业学习笔记》

CSS的引入

 安装： npm install css-loader style-loader --save

app.js:

import "./test.css";
import "./test2.css";
console.log(123);

webpack.Config.js:
注意：要先css-loader, 然后style-loader，但是写在后面的先执行，所以要先写style-loader。

module.exports = {
    entry: {
        app: './app.js'
    },
    output: {
        path: __dirname+"/src/dist",
        filename: './[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                       loader: "style-loader"
                    },
                    {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    }
}

打包结果：

打开index.html,发现css已经生效，控制台也有相应日志输出。

config配置文件：
以下写法 insertInto， singleton在style-loader中，已不支持，需要安装0.版本。

module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                       loader: "style-loader",
                       options: {
                           //insertAt: 'top' / 'bottom' //相对于头部的top和bottom
                        //    insertAt: {
                        //        before: '#mydiv'
                        //    },
                           insertInto: "#mydiv",   // 插入到id为mydiv dom元素里
                           singleton: true         // 是否将多个style标签合并为一个标签
                       }
                    },
                    {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    }

结果见下图：

transform: 可以在css被插入之前对css进行js修改，指定处理css的js文件。
transform: ‘./transform.js’

module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                       loader:"style-loader",
                       options:{
                          insertInto:"#mydiv",
                          singleton: true,
                          transform: './transform.js'
                       }
                    },
                    {
                        loader:"css-loader"
                    }
                ]
            }
        ]
    }

transform.js:

module.exports = function(css) {
    if(window && window.screen.width < 500) {
        css = css.replace('red','yellow');
    }
    return css;
}

css-loader

minimize，alias: 已经在webpack4中去除了。
```
{
loader:"css-loader",
options: {
   modules: true
 }
}
```

test2.css

body{
    font-size: 20px;
}
/* 全局样式 border-white */
:global .border-white{
    border: 4px solid white;
}
/* 局部样式 border-white */
:local .div1{
    width: 100px;
    height: 100px;
    background-color: pink;
    /* composes: border-white;    */
    /* 继承border-white, 还可以从其他文件继承，如下 */
    composes: border-yellow from './test.css';
}

test.css:

*{
    background-color: red;
}
.border-yellow{
    border: 4px solid yellow;
}

html运行结果：
可以发现，标记为局部和没有任何标记的类名会被重新编码，所以导致类没有起作用。

那怎么办呢？
需要在app.js中对用到的类进行处理一下：

import test from "./test.css";
import test2 from "./test2.css";
console.log(123);
document.getElementById('mydiv').setAttribute('class', test2.div1);

在看index.html的运行结果：

如果想指定css类名：

name为css文件名，local为原类名。

{
                        loader:"css-loader",
                        options: {
                            modules: {
                                localIdentName: '[path][name]_[local]_[hash:4]'
                            }
                        }
                    }

运行结果：

less和sass等预处理语言的编译

将上例子中的css都改为less文件，引用的地方也需要改：
test.less: 定义了一个@base的变量。

@base: green;   
*{
    background-color: red;
}
.border-yellow{
    border: 4px solid @base;
}

提取css到一个文件

webpack4.0中要安装next版本，而且它是依赖局部webpack的，所以要安装一个局部的webpack才能使用。
npm install extract-text-webpack-plugin@next webpack —save

安装完后，需要改造config文件如下：

var extractTextCss = require('extract-text-webpack-plugin');
module.exports = {
    entry: {
        app: './app.js'
    },
    output: {
        path: __dirname+"/src/dist",
        filename: './[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                use: extractTextCss.extract({
                    fallback: {
                        loader:"style-loader",
                        options:{
                            insertInto:"#mydiv",
                            singleton: true,
                            transform: './transform.js'
                        }
                    },
                    use: [
                         {
                             loader:"css-loader",
                             options: {
                                 modules: {
                                     localIdentName: '[path][name]_[local]_[hash:4]'
                                 }
                             }
                         },
                         {
                             loader: "less-loader"
                         }
                    ]
                })
            }
        ]
    },
    plugins: [
        new extractTextCss({
            filename: '[name].min.css'
        })
    ]
}

postcss 和 postcss-loader
PostCSS 的主要功能只有两个：第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的 AST(抽象语法树结构（Abstract Syntax Tree，AST）)，第二个就是调用插件来处理 AST 并得到结果。因此，不能简单的把 PostCSS 归类成 CSS 预处理或后处理工具。PostCSS 所能执行的任务非常多，同时涵盖了传统意义上的预处理和后处理。PostCSS 是一个全新的工具，给前端开发人员带来了不一样的处理 CSS 的方式。

安装：
npm install postcss postcss-loader autoprefixer postcss-cssnext —save

postcss-loader需要定义在预处理loader的后面，也就是less，sass-loader的后面。

use: [
                         {
                             loader:"css-loader",
                             options: {
                                 modules: {
                                     localIdentName: '[path][name]_[local]_[hash:4]'
                                 }
                             }
                         },
                         {
                            loader: 'postcss-loader',
                            options:{
                                ident:'postcss',
                                plugins: [
                                    require('autoprefixer')()
                                ]
                            }
                         },
                         {
                             loader: "less-loader"
                         }
                    ]

修改test.less:

增加flex。

@base: green;
*{
    background-color: red;
}
.border-yellow{
    border: 4px solid @base;
    display: flex;
}

webpack打包后，display: flex; 并没有被加上前缀。需要制定以什么样的浏览器为目标才可以。

{
  loader: 'postcss-loader',
    options:{
      ident:'postcss',
        plugins: [
          require('autoprefixer')({
            "overrideBrowserslist": [
              ">1%", "last 2 versions"
            ]
          })
        ]
    }
 }

查看css代码，可以发现flex已被加上了前缀。

需要兼容性编译的地方，都需要去指定编译目标。
可以在package.json文件中指定：

"browserslist": [
  ">1%", "last 2 versions"
]

也可以在根目录下新建文件 .browserslistrc，来统一指定。

在test.less中写入了cssnext的语法，也就是下一代css的语法：

更改config文件，添加 postcss-cssnext：

{
  loader: 'postcss-loader',
    options:{
      ident:'postcss',
        plugins: [
          require('autoprefixer')(),
          require('postcss-cssnext')()
        ]
    }
  }

webpack打包后可以看出已经生效啦。