CSS

Postcss 简明教程 及 css module

2020-06-06  本文已影响0人  li4065

在前端开发中一直有个原则，叫做"关注点分离"，意思就是各种技术只负责自己的领域，不要混合在一起，形成耦合，这种原则比较直观的体现就是不要写"行内样式"（inline style）和"行内脚本"（inline script），HTML、CSS、JavaScript各干各的事，避免混用（此处参考CSS in JS 简介）

现在前端在进行开发时，基本都被各种框架覆盖，新起一个项目，第一步都是技术选型。看看是用 React、还是用 Vue，然后再配套的去选择相关技术栈，以及相应的框架。这是技术的进度，让开发人员能比较关注业务逻辑的展开，但另一方面也可以认为这是一种枷锁。。。

由于框架的使用，使我们之前的关注点分离变的策略，现在其实都是在 js 中进行。HTML 以 虚拟DOM 的形式存在其中，css 通常是以 import 的形式载入，最终通过 webpack 之类的工具，再导出成一个独立的样式文件。

相比 HTML，框架对 CSS 都没进行什么特殊处理，也没有形成类似 JSX 的解决方案，不过这其中倒是有一个比较有意思的解决方案：css-in-js（不过在 js 中写 css，怎么都感觉有些别扭）。

另外 css 本身编程能力薄弱，社区也形成各种方案来提升 css 编程能力。相比其他方案，我感觉 Postcss 更为优雅，所以这里特别介绍下

目前是基于 postcss 7.0.31 版本

基本概念

预处理器是指对 css 能力增强的功能，添加一些一些本身不是css的功能(比如嵌套、变量)，通过处理后能转成普通的CSS，

通过一些规则把已有的css进行完善，比如添加浏览器前缀

Demo

此处没有使用vue或react的脚手架，为了演示完整功能，构建了一个基于Vue的开发环境，并演示加载样式和提取

使用这种方式，项目的名词一定不要和某些库的名词冲突，比如叫webpack，postcss，如果叫这个名词安装相关库时就会报ENOSELF的错误

npm i --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin postcss postcss-loader mini-css-extract-plugin css-loader style-loader @babel/cli @babel/core @babel/preset-env vue-loader vue-template-compiler

npm i --save vue

* css-loader 是可以在页面中使用 import 引入 css 的能力
* style-loader 是把 css 代码生成 style 标签，放到 head 标签中
* mini-css-extract-plugin 提取css用的插件

其他包不在本文讨论范围，故不介绍

/// babel.config.js
const presets = [["@babel/env"]];

module.exports = {
    presets
}
...
/// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry: './src/index.js',
    resolve: {
        extensions: ['.js', '.vue']
    },
    output: {
        filename: '[name].js',
        publicPath: '/'
    },
    mode: 'development',
    module: {
        rules: [
            {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},
            {test: /\.vue$/, use: 'vue-loader', exclude: /node_modules/},
            {test: /\.css/, use: ['style-loader', 'css-loader']}
        ]
    },
    devServer: {
        port: '8111'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/tpl/index.html'
        }),
        new VueLoaderPlugin()
    ]
}
...
/// 假定有个 app.vue 按如上设置
import '../style/app.css';

这时就可以通过 import 方式把样式文件导入到页面中，因为此时用的是 style-loader ，样式会写入到 <head> 下的 <style> 标签中

/// webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
...
{test: /\.css/, use: [MiniCssExtractPlugin.loader, 'css-loader']} // 替换 style-loader
...
plugins: [
    ...
    new MiniCssExtractPlugin({
    filename: "[name].css",
    chunkFilename: "[id].css"
  })
]

/// app.css
.info {
    font-size: 24px;
}
...
/// color.css
.info {
    color: red;
}
...
/// app.vue
import '../style/app.css';
import '../style/color.css';
...
/// 合并出的样式文件如下
.info {
    font-size: 24px;
}
.info {
    color: red;
}

编程化

通过 .pcss 引入样式文件

.pcss 是 Postcss 的专用格式文件

npm i --save-dev postcss-import

需要先添加一个对 Postcss 的运行配置文件，可以叫 .postcssrc.js 或 postcss.config.js

// 暂时没有其他配置，可以把留空
module.exports = {
    plugins: []
}

postcss.config.js 除了 plugins 还具有如下参数：

不过常用的就是 plugins （定义使用的插件）

/// 在webpack.config.js中做如下修改
{test: /\.pcss$/, use: [
    MiniCssExtractPlugin.loader,
    "css-loader",
    "postcss-loader"
]},
...
/// mian.pcss
@import './app.css';
@import './color.css';
...
/// app.vue 引入 main.pcss
import './main.pcss';

PostCss 的编程能力，是通过各种插件实现的，可以自己编写，或者直接使用社区现有插件，插件在 Postcss 的配置文件中设置使用参数

autoprefixer

这应该是postcss中使用最为广泛的插件了，自动识别设定的浏览器兼容范围，添加浏览器样式前缀

npm i --save-dev autoprefixer

/// postcss.config.js
let postcssConfig = {};
postcssConfig.autoprefixer = {
    browsers: ['> 1%', 'ff 3']
}

module.exports = {
    plugins: postcssConfig
}

b {
    border-radius:5px;
}

编译运行后结果为

b {
       -moz-border-radius:5px;
            border-radius:5px;
}

autoprefixer 的参数，使用默认配置即可。这里只说 browsers 参数的设定，因为这关系到最终添加前缀的内容。

browsers 是利用 browserslist 功能来决定是否需要添加某些浏览器前缀，在browserslist的文档里我们可以找到详细设定，可以设定针对浏览器、国家、指定平台、年份做设置

> 5%
cover 99.5%
> 5% in US
node 10 and node 10.4
since 2015
ie 6-8
not ie <= 8

下面列举下在项目中最有可能碰到的浏览器

browsers 接收的是一个数组，所以可以像例子中那样分开设置，下面的话的意思就是为了适配 安卓2.3，ios3.2，Safari3.1，IE10 浏览器要添加相关前缀

'> 0%','Android 2.3','iOS 3.2','Safari 3.1','IE 10'

> 0% 是指当你不想像上面设置那么繁琐的指定浏览器时，可以直接指定个大概，就是我要支持市面上多少多少比例的浏览器，这个数字前面可以添加普通的运算符 >、>=、< 、<=

前缀修饰符 not 表示不在某个范围中，还可以使用 cover extends 或 since 进行更细化的设置，包括道指定从哪年开始的什么版本。

圆角功能是 ff4 才加的功能，我们指定适配某个浏览器版本，这时就会发现运行后的样式一样会有ff的私有前缀，所以一般我们结合浏览器覆盖范围，再加上对特定浏览器的排除就能完成相关设置

/// 如此设定后，生成的样式就不会有针对 火狐浏览器 的前缀
  browsers: ['> 1%', 'ff > 4']

有一点需要注意的，设置范围时需要指定范围，不能直接设置ff或者not ff，这时编译会报错，你需要明确指明版本才可以

在 package.json 中设置 browserslist

由于还会有其他插件（比如 babel ）需要针对浏览器设置兼容情况，所以针对浏览器的范围设定，一般会建议加上 package.json 中。
在其中，设置 "browserslist": ["> 1%", "ff > 4"]（package.json 中设定的优先级低于插件的设置）

postcss-preset-env

这个插件允许开发人员在当前项目中使用 css 将来版本可能会加入的新特性，这个就非常类似于写 ES6 的代码，但是使用 babel 转成 ES5 的代码。

这个插件中包含了autoprefixer

另外一个类似的插件，postcss-cssnext 已经不再维护

npm i --save-dev postcss-preset-env

// 新增
const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [
  postcssPresetEnv({ 
    stage: 2
    // browsers: 'last 2 versions' // 这个插件包含 autoprefixer 的功能，可以在配置中进行浏览器的相关设定
  })
  ]
}

插件参数说明

下面根据官方的文档介绍相关设置参数：

postcssPresetEnv({
  /* 使用stage为3的标准，同时允许嵌套规则(嵌套是stage 0的标准) */
  stage: 3,
  features: {
    'nesting-rules': true
  }
})

import postcssSimpleVars from 'postcss-simple-vars';

postcssPresetEnv({
  insertBefore: {
    'all-property': postcssSimpleVars
  }
})

postcssPresetEnv({
  importFrom: [
    /*
    @custom-media --small-viewport (max-width: 30em);
    @custom-selector :--heading h1, h2, h3;
    :root { --color: red; }
    */
    'path/to/file.css',

    /* module.exports = {
    customMedia: { '--small-viewport': '(max-width: 30em)' },
    customProperties: { '--color': 'red' },
    customSelectors: { ':--heading': 'h1, h2, h3' },
    environmentVariables: { '--branding-padding': '20px' }
    } */
    'and/then/this.js',

    /* {
    "custom-media": { "--small-viewport": "(max-width: 30em)" }
    "custom-properties": { "--color": "red" },
    "custom-selectors": { ":--heading": "h1, h2, h3" },
    "environment-variables": { "--branding-padding": "20px" }
    } */
    'and/then/that.json',

    {
      customMedia: { '--small-viewport': '(max-width: 30em)' },
      customProperties: { '--color': 'red' },
      customSelectors: { ':--heading': 'h1, h2, h3' },
      environmentVariables: { '--branding-padding': '20px' }
    },
    
    () => {
      const customMedia = { '--small-viewport': '(max-width: 30em)' };
      const customProperties = { '--color': 'red' };
      const customSelectors = { ':--heading': 'h1, h2, h3' };
      const environmentVariables = { '--branding-padding': '20px' };

      return { customMedia, customProperties, customSelectors, environmentVariables };
    }
  ]
});

stage 2及以上的css语法

就是开启默认配置可以直接使用的css语法

a  {
   all：initial ; 
}

nav：any-link> span  {
   background-color：yellow ; 
}

img {
  --some-length: 32px;

  height: var(--some-length);
  width: var(--some-length);
}

.pie_chart {
  background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
}

该属性是用来设置网格行与列之间的间隙（gutters），是row-gap 和 column-gap的简写形式

// resolve是postcss-assets的功能，下面有介绍
.foo {
    background-image: image-set(resolve('logo1x.jpg') 1x,
                                resolve('logo2x.jpg') 2x,
                                resolve('logo-print.jpg') 600dpi);
}
...
// become
.foo {
    background-image: url(resolve('logo.jpg'));
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {.foo {
    background-image: url(resolve('logo.jpg'));
}
}
@media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) {.foo {
    background-image: url(resolve('logo.jpg'));
}
}

span:first-child {
  float: inline-start;
  margin-inline-start: 10px;
}

p:matches(:first-child, .special) {
  margin-top: 1em;
}


p:not(:first-child, .special) {
  margin-top: 1em;
}


@media (width < 480px) {}

@media (480px <= width < 768px) {}

@media (width >= 768px) {}

html  {
   color：rebeccapurple ; 
}


body  {
   font-family：system-ui ; 
}

stage 1 的css语法

因为设定的stage为2，如果要启用需要在features配置中开启，对应的id可以在插件api中查看，对应的id就是英文加中划线，有感觉对不上的可以去对应github的js文件中查看

postcssPresetEnv({ 
    stage: 2,
    browsers: ['> 1%'],
    features: {
      'nesting-rules': true,
      'custom-media-queries': true,
      'custom-selectors': true
    }
})

@custom-media --small-viewport (max-width: 30em);

@media (--small-viewport) {
  h1 {font-size: 16px}
}
...
// 转码为
@media (max-width: 30em) {
  h1 {font-size: 16px}
}

最大最小宽度，可以使用>= <=代替

@custom-media --small-viewport (width >= 500px) and (width <= 1200px);

@media (--small-viewport) {
  h1 {font-size: 16px}
}
...
// 转为
@media (min-width: 500px) and (max-width: 1200px) {
  h1 {font-size: 16px}
}

CSS 扩展规范（CSS Extensions）中允许创建自定义选择器，可以使用@custom-selector”来定义自定义选择器

@custom-selector :--heading h1, h2, h3, h4, h5, h6;
 
:--heading {
 font-weight: bold;
}

运行后变为

h1,
h2,
h3,
h4,
h5,
h6 {
 font-weight: bold;
}

stage 0的css语法

减少重复的选择器声明，通过两种方式进行嵌套：第一种方式要求嵌套的样式声明使用“&”作为前缀，“&”只能作为声明的起始位置；第二种方式的样式声明使用“@nest”作为前缀，并且“&”可以出现在任意位置

// 嵌套只能使用&开头，除非前缀有@nest
.message {
 font-weight: normal;
 & .header {
   font-weight: bold;
 }
  @nest .body & {
   color: black;
 }
}

运行后

.message {
 font-weight: normal
}
.message .header {
 font-weight: bold;
}
.body .message {
 color: black;
}

postcss-assets

引用外部资源时，可以通过这个插件设置资源查找路径，简化在样式文件中插入图片的操作

安装

npm i --save-dev postcss-assets

// 设置loadPaths指定查找路径
assets({
  loadPaths: ['src/images']
}),

这时如果在main.css的文件中，如果这么设置一个类

// 配置resolve,指定在查找路径下,搜索图片
.logo {
 background-image: resolve('logo.jpg');
}
...
// 编译后会变成，自动识别了
.logo {
 background-image: url('/src/images/logo.jpg');
}

这里会要求图片是目录下是存在的，如果不存在进行编译时会报错，loadPaths 是个数组，相当于是多个搜索的目录，只要图片在某一个目录下即可，不过从编译时性能角度来考虑，一定不可以设置过多的目录，否则一定会影响编译速度

postcss-assets 还有其他几项设置：

// 比如如果设为true，图片后就会加一串hash值
.logo {
 background-image: url('/src/images/logo.jpg?1637e45dd90');
}

另外这个插件，还支持通过图片进行相关设置

.logo {
 background-image: inline('logo.jpg');
 width: width('logo.jpg');
 height: height('logo.jpg');
}
...
// 运行后
.logo {
 background-image: ...base64的图片
 width: 493px;
 height: 448px;
}

cssnano

webpack4+ 的版本，已经集成了cssnano，mode 设为生产模式就会自动启用这个插件

npm install --save-dev cssnano

// 如果单独使用，可以这么配置
module.exports = {
    plugins: [
        require('cssnano')({
            preset: 'default',
        }),
    ],
};

使用 postcss 实现一个 sass

postcss 可自主定义相关插件的使用，组合出适合自己使用的功能，借助 postcss 的插件来实现一个类 sass

相关插件介绍

@import

使用 postcss-import 插件

const atImport = require("postcss-import");
module.exports = {
  plugins: [
    atImport(),

元素嵌套

使用 postcss-preset-env 插件 stage:0 中的 nesting-rules

require('postcss-preset-env')({
    stage: 2,
  browsers: ['> 1%'],
  features: {
    'nesting-rules': true
  }
})

具体写法上和sass嵌套的写法有些不一样，不过这种写法是未来css的标准，以这个为主要写法

nav {
  & ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  & li {
    display: inline-block;
  }

  & a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    & span {
      color: $red;
    }
  }
}

变量、@if、@else、@for、@each、@mixin、@include、@content

使用 postcss-advanced-variables 这个插件，这个插件能实现sass变量的大部分功能，不过一个特殊的语法#{$var-name}需要使用到 postcss-scss 这个插件，并且在postcss.config.js 中设置 parser 为 postcss-scss

const advanced = require("postcss-advanced-variables");
module.exports = {
  parser: "postcss-scss",
  plugins: [
    advanced(),
    ...

// 变量
$font-size: 1.25em;
$font-stack: "Helvetica Neue", sans-serif;
$primary-color: #333;

body {
  font: $font-size $(font-stack);
  color: #{$primary-color};
}
...
// 转为
body {
  font: 1.25em "Helvetica Neue", sans-serif;
  color: #333;
}

// @if、@else
$type: monster;
 
p {
  @if $type == ocean {
    color: blue;
  } @else {
    color: black;
  }
}
...
// 转为
p {
    color: black
}

// @for
@for $i from 1 through 5 by 2 {
  .width-#{$i} {
    width: #{$i}0em;
  }
}
...
// 转为
.width-1 {
    width: 10em;
  }
.width-3 {
    width: 30em;
  }
.width-5 {
    width: 50em;
  }

// @each
@each $animal in (red, yellow, black, white) {
  .#{$animal}-icon {
    color: #{$animal};
  }
}
...
// 转为
.red-icon {
    color: red;
  }
.yellow-icon {
    color: yellow;
  }
.black-icon {
    color: black;
  }
.white-icon {
    color: white;
  }

// @mixin @include
@mixin heading-text {
  color: #242424;
  font-size: 4em;
}
 
h1, h2, h3 {
  @include heading-text;
}
...
// 转为
h1,
h2,
h3 {
  color: #242424;
  font-size: 4em;
}

属性嵌套

postcss-nested-props

const nestedProps = require("postcss-nested-props");
module.exports = {
  plugins: [
    nestedProps(),

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
...
// 转为
.funky {
    font-family: fantasy;
    font-size: 30em;
    font-weight: bold
}

Extend/Inheritance(扩展/继承)

postcss-extend

const extend = require("postcss-extend");
module.exports = {
  plugins: [
    extend(),

// 这里和sass有点不同，使用 @define-placeholder 而非 % 导出样式块
@define-placeholder message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.message {
  @extend message-shared;
}

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
...
// 转为
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

添加calc()计算

postcss-calc

const calc = require("postcss-calc");
module.exports = {
  plugins: [
    calc(),

@mixin columns_calc($count) {
  width: calc(100% / $count);
  @if $count > 1 {
    float: left;
  }
}
.column_calculated {
  @include columns_calc(2);
}
...
// 转为
.column_calculated {
  width: 50%;
  float: left;
}

添加了这些插件，基本就可以完全可以满足正常开发需求

完整配置如下:

const postcssPresetEnv = require("postcss-preset-env");
const atImport = require("postcss-import");
const advanced = require("postcss-advanced-variables");
const nestedProps = require("postcss-nested-props");
const extend = require("postcss-extend");
const calc = require("postcss-calc");
module.exports = {
  parser: "postcss-scss",
  plugins: [
    atImport(),
    advanced(),
    nestedProps(),
    extend(),
    calc(),
    postcssPresetEnv({
      stage: 2,
      browsers: "> 3%",
      features: {
        "nesting-rules": true
      }
    })
  ]
};

独立使用postcss

可以通过 postcss-cli 这个插件构建一个独立使用的 css 处理平台，可在 package.json 中添加如下命令

  "scripts": {
    "build:pc": "npx postcss src/main.pc.css -o dist/main.pc.css",
    "build:h5": "npx postcss src/main.h5.css -o dist/main.h5.css"

// src/main.pc.css
@import 'normalize.css';
@import 'reset.css';
@import 'variables.css';
@import 'common.css';
@import 'common.mixin.css';
@import 'layout.mixin.css';
@import 'layout.css';
@import 'layout-flex.css';
@import 'button.mixin.css';
@import 'button.css';
@import 'button-group.css';
@import 'skeleton.mixin.css';
@import 'skeleton.css';
@import 'breadcrumb.css';
@import 'dropdown.css';
@import 'menu.css';
@import 'pagination.mixin.css';
@import 'pagination.css';
@import 'step.css';
@import 'checkbox.css';
@import 'cascader.css';
@import 'form.css';
@import 'calendar.css';
@import 'input-number.css';
@import 'rate.css'

这里由一个统一入口文件，控制针对PC，H5不同的样式表的输出，在入口文件中，可以设置引入不同的变量（比如上面例子中的 variables.css 正常开发中，可以细化成variables.pc.css或者variables.orange.css 这类的样式），让换肤类的功能也比较容易实现

避免编译器对pcss文件报错

我使用的是我使用的是vscode，引用插件后写的样式，编译器基本是不认识的，会给你报错，所以这里说下如何避免对pcss的报错，其他编译器应该也有类似的方法

对vscode添加对.pcss文件的支持

"*.css": "postcss"

设置 "postcss.validate": false，避免检查器对 pcss 进行检查

css module

（参考CSS in JS 简介）
css module 和 css in js 都是社区针对 css 作用域提出的解决方案，从实际开发过程中，感觉 css module 的方式，更适合分工合作的要求。

现在开发中，不管你使用什么框架，基本的流程大概都是：先做静态页面，再接动态数据。这里很容易就会形成两条工作线：一类专门进行重构，与设计师、交互对接完成视觉实现；另一类专门与产品经理、后端对接业务需求（体量大的公司会拆分成两个工种，小公司自然是全干了，但是工作场景多半如此）。

css in js 的方式，更符合独立组件的封装型。从样式、逻辑到内容展现，在一个 js 中都实现，不需要再引入其他文件，如果是写 ui 组件这种方式是极好的。

但是如果是正常的开发需求，你用这种方式，就表示样式问题的改动、修复，业务逻辑的实现，都是在一个文件中进行，不利于分工合作。

个人感觉 css in js 方式会让 js 文件变得混乱，可读性下降（正常开发就算是状态管理，一般都会被拆分成一个个独立的文件）。而且没办法单独输出样式文件，没办法把样式文件丢在某个 cdn 服务器下，也影响组件的复用性。如果要复用某个组件（业务组件）就表示要接受这个组件自带的样式，稍微调整点字号颜色啥的，就要单独加个接收参数，或者新建个类似 list-red 的新组件（如果是引入样式的方式，完全可以通过再引入这个组件的外层加个类似 <div class='red-list'><list /></div>，在外层样式文件中直接控制，也很容易扩展多个不同样式、换肤啥的）。

css in js 方式对重构人员也不友好，他们之前查看样式问题，直接修改样式文件部署后就能看出问题能不能解决，现在需要修改 js 文件等js文件部署后才能查看改动是否生效（如果再碰到分支不同，版本不同的情况，那更热闹了。。。）

启用

参考了 CSS Modules 用法教程

配合 css-loader 使用，在 webpack 配置项中如下设置：

{test: /\.pcss/, use: [MiniCssExtractPlugin.loader, 'css-loader?modules', 'postcss-loader']}，

这样就开启了 css module，它的使用会把对应的样式名变成一种有规律，但不可预期的名称，比如

/// main.pcss
/// 由于样式文件本身并没有要求 .classname 不能重复，所以要自己保证不要重复，否则针对同一类名会转出多个变量名，在使用时会有问题
.box {
    border-radius:5px;
}
.info {
    color: red;
    font-size: 24px;
}
...
/// app.vue
<template>
    <div :class="$style.info">{{ msg }}</div>
</template>
import style from '../style/main.pcss';
...
computed: {
  $style () {
    return style;
  }
}

$style 的使用方式参考了 vue-loader 的 CSS Modules 方案，vue loader 会使用 $style 的计算属性，向组件注入 CSS Modules 局部对象

style 会输出为（value 值是一个动态值）

{box: "_2sI8WybUY_1NGPVWmXjdbV", info: "_hA0iOLbXZy9PpOuCjpkc"}

组件内直接使用其中的定义的样式名，会自动替换成这些名称，样式文件也会自动转成这些名称，这样可以解决 css 的样式冲突（污染）的问题，全局污染的问题，也可以算是解决依赖的问题，组件只需要引入自己相关的样式，在这个相关样式文件中定义自己需要使用的样式，再通过 $style 的形式给相关组件使用。

vue 的写法稍微麻烦点（如果用 JSX 会简单些），如果是在 react 中可以直接使用

import style from '../style/main.css';

class App extends Component {
    render () {
        return <div className={style.info}>app info</div>
    }
}

全局作用域

在引入的样式文件中，默认会对所有样式进行转换，如果你的样式只是想通过普通方式使用，可以有两种方案：

/// webpack.config.js
{test: /\.css/, use: [MiniCssExtractPlugin.loader, 'css-loader']},
{test: /\.pcss/, use: [MiniCssExtractPlugin.loader, 'css-loader?modules', 'postcss-loader']}
...
/// global.css
body {
    font-size: 18px;
    background: #cccccc;
}
...
/// app.vue
import '../style/global.css';
import style from '../style/main.pcss'; // 这里虽然是分开导入，但是最终会合并和一个样式文件
...
/// main.css 导出的样式文件
body {
    font-size: 18px;
    background: #cccccc;
}
._2sI8WybUY_1NGPVWmXjdbV {
    border-radius:5px;
}
._hA0iOLbXZy9PpOuCjpkc {
    color: red;
    font-size: 24px;
}

:local 可以设置哪些需要转，因为默认就是转换，没必要再加一层说明其需要转换

对于需要转换的，请一直使用 .classname，不要使用 id

/// main.pcss
...
:global(body)  {
    font-size: 18px;
    background: #cccccc;
}

Composing(组合) 及 Importing(导入)

组合的意义并不是把样式代码进行混合，而是在于使用了组合的类名，在引用时会包含其组合的子类

.box {
    border-radius:5px;
}
.info {
    color: red;
    font-size: 24px;
}
.foo {
    composes: box;
    composes: info;
    padding: 10px;
}
/// 经过转换后对应的json信息如下
box: "src-style-main__box--2sI8W",
info: "src-style-main__info--_hA0i",
foo: "src-style-main__foo--LiN2X src-style-main__box--2sI8W src-style-main__info--_hA0i",
/// 如果我们使用 $style.foo 还会包含其他两个子类的内容

composes 还可以从其他样式模块中导入样式进行组合

.foo {
    composes: main-title header-title from './color.css';
    padding: 10px;
}

@value

css 变量的解决方案很多，这个是 css-loader 的方案

官方有个命名建议：v- 定义value值, s- 选择器 m- 定义 media 规则

@value v-primary: #BF4040;
@value s-black: black-selector;
@value m-large: (min-width: 960px);

.header {
  color: v-primary;
  padding: 0 10px;
}
:global .s-black {
  color: black;
}
@media m-large {
  .header {
    padding: 0 20px;
  }
}

定制编译后的类名

css-loader 默认的哈希算法是 [hash:base64]，转出的就是这种 _2sI8WybUY_1NGPVWmXjdbV，这个转换后的名称是可以定制的

// 参数比较长，再使用拼接的写法，看起来不美观
loader: 'css-loader',
options: {
  modules: {
    localIdentName: '[path][name]__[local]--[hash:base64:5]'
  } // 注意是在 modules 下设置 localIdentName
}

按官方建议

这样转出的类名就类似 src-style-main__box--2sI8W，能看出路径和使用模块，方便定位样式问题所在的

css loader 参数

名称 类型 默认 描述
url {Boolean|Function} true 启用/禁止 url() 功能
import {Boolean|Function} true 启用/禁用 @import 处理
modules {Boolean|String|Object} false 启用/禁用 CSS Modules 以及相关配置
sourceMap {Boolean} false 启用/禁用 map 功能
importLoaders {Number} 0 在 css-loader 之前使用多少个加载器（默认，别去动这个值，按 webpack 中的设置的 use 顺序去执行使用 loader）
localsConvention {String} 'asIs' 导出的 JSON 对应的 Key 的规则
onlyLocals {Boolean} false 影响打包时的 loader 顺序，一些 SSR 场景下可以需要设置这个值，一般情况下别用
esModule {Boolean} false 是否启用 es module

url

/// 先安装 url-loader 处理图片，并添加相关配置信息
{
  test: /\.(png|svg|jpg|jpeg|gif)$/,
  use: "url-loader"
},
...
/// main.pcss
.foo {
  color: red;
  font-size: 14px;
  background: url("../image/timg.jpeg"); // 此处设定了背景图
}

按如上设置，转换出的 css 会对图片进行处理，但如果设置这个值为 false

{
  loader: "css-loader",
  options: {
    modules: true,
    url: false // 这个值默认是 true
  }
},

转换出的 css 就不会对 url() 进行处理，原样输出

/// 不如处理 background: url("../image/timg.jpeg");
/// 这个 url 还可以设置为函数，在这里可以控制，只有指定图片名会转，进行差异化处理
url: (url, resourcePath) => {
    // url ../image/timg.jpeg
  // resourcePath - css 的绝对路径

  // 不处理 `img.png` urls
  if (url.includes('img.png')) {
    return false;
  }

  return true;
},

import

这个值和 url 功能类似，只不过这里是控制文件的导入导出，这个值也一样可以设置 true 或 false，如果这样直接设置，那这肯定有问题，这个参数要么不设置，要设置一定是要对url进行过滤

/// @import "./color.css";
import: (parsedImport, resourcePath) => {
    // parsedImport { url: './color.css', media: '' }
  // parsedImport.url - `@import` 文件时对应的路径 
  // parsedImport.media -  `@import` 媒体查询时对应的路径
  // resourcePath - css 文件的绝对路径

  // 包含 `style.css` 不进行合并处理
  if (parsedImport.url.includes('style.css')) {
    return false;
  }

  return true;
},

@import 是一个广泛被支持的 css 属性，大于 IE9 的浏览器就可以正常使用

modules

true 或 false 启用/禁止（还可以通过设置 modules 的值为 'local' 或 'global'启用/禁止） css modules

前面提到的 :global :local、Composing Importing 、@value、localIdentName 都是 modules 的配置信息，modules 可以接收一个对象进行其他配置

modules: {
  mode: 'local', // 设置 local 启用 global 禁用 css 模块
  exportGlobals: true,
  localIdentName: '[path][name]__[local]--[hash:base64:5]', // 编译后的类名
  context: path.resolve(__dirname, 'src'),
  hashPrefix: 'my-custom-hash',
},

/// 在 mode 为 pure 时，会提示编译出错
 :local(.zoo)
...
/// mode 还可以接受一个函数形式，对指定路径的样式文件进行特殊处理（什么文件开启转换，什么文件不开启），返回值只能是这三个值
mode: (resourcePath) => {
  if (/pure.css$/i.test(resourcePath)) {
    return 'pure';
  }

  if (/global.css$/i.test(resourcePath)) {
    return 'global';
  }

  return 'local';
},

localsConvention

这个设定导出 JSON 时，key值和类名如何映射，默认值是 'asIs'

loader: 'css-loader',
options: {
  modules: {
    mode: 'local',
    localIdentName: '[path][name]__[local]--[hash:base64:5]'
  },
    localsConvention: 'asIs'
}
...
.infoNews {
    font-size: 35px;
}
.info-old {
    color: white;
}
.info_dashes {
    color: salmon;
}
.info {
    color: red;
}
...
/// 默认 asIs，类名是啥，导出的就是啥
info: "src-components-page1-index__info--10GK2"
info-old: "src-components-page1-index__info-old--k163w"
infoNews: "src-components-page1-index__infoNews--1uma1"
info_dashes: "src-components-page1-index__info_dashes--FVVUn"
...
/// camelCase 驼峰，会把非驼峰的命名转为驼峰，并保留之前的类名
info: "src-components-page1-index__info--10GK2"
info-old: "src-components-page1-index__info-old--k163w"
infoDashes: "src-components-page1-index__info_dashes--FVVUn" // 值同 info_dashes
infoNews: "src-components-page1-index__infoNews--1uma1"
infoOld: "src-components-page1-index__info-old--k163w" // 值同 info-old
info_dashes: "src-components-page1-index__info_dashes--FVVUn"
...
/// camelCaseOnly 与驼峰类似，只不过不会保留非驼峰的转换
info: "src-components-page1-index__info--10GK2"
infoDashes: "src-components-page1-index__info_dashes--FVVUn"
infoNews: "src-components-page1-index__infoNews--1uma1"
infoOld: "src-components-page1-index__info-old--k163w"
...
/// dashes 一样也是转驼峰，只不过这里限制只转 ``-`` 号
info: "src-components-page1-index__info--10GK2"
info-old: "src-components-page1-index__info-old--k163w"
infoNews: "src-components-page1-index__infoNews--1uma1"
infoOld: "src-components-page1-index__info-old--k163w"
info_dashes: "src-components-page1-index__info_dashes--FVVUn" // 不转换
...
/// dashesOnly 不保留转换前的
info: "src-components-page1-index__info--10GK2"
infoNews: "src-components-page1-index__infoNews--1uma1"
infoOld: "src-components-page1-index__info-old--k163w"
info_dashes: "src-components-page1-index__info_dashes--FVVUn"

之所以会有这么个参数，是因为我们在使用 css modules 时，最终可能会动态绑定到某个组件上，这是为了方便在 js 中使用

上一篇下一篇

猜你喜欢

热点阅读