前言

本文代码基于之前的代码上扩展，本篇讲解下less的postcss的使用

less安装并使用

安装

1	npm i less

使用

把home.vue修改一下,添加下style，看看less是否生效

<template>
    <div class="user-info">
        <div class="user-info-name">
            用户名：{{userStoreRef.username.value}}
        </div>
        <div class="user-info-role">
            权限：{{ userStoreRef.isAdmin.value}}
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import {useUserStore} from "@/store/index";
import {storeToRefs} from "pinia"
const userStore = useUserStore();
const userStoreRef = storeToRefs(userStore);
onMounted(()=>{
    userStore.setValue({
        username: 'admin',
        isAdmin: true
    })
})
</script>
<style scoped lang="less">
.user-info{
    &-name{
        color:red;
    }
    &-role{
        color:blue;
    }
}
</style>

postcss安装并使用

我不知道大家是否知道这个东西，postcss是是一个用 JavaScript 工具和插件转换 CSS 代码的工具，
这是他的官网地址

postcss分类

解决全局 CSS 的问题

postcss-use

允许你在 CSS 里明确地设置 PostCSS 插件，并且只在当前文件执行它们。

postcss-modules

可以自动以组件为单位隔绝 CSS 选择器。

react-css-modules

可以自动以组件为单位隔绝 CSS 选择器。

postcss-autoreset

是全局样式重置的又一个选择，它更适用于分离的组件。

postcss-initial

添加了 all: initial 的支持，重置了所有继承的样式。

cq-prolyfill

添加了容器查询的支持，允许添加响应于父元素宽度的样式.

提前使用先进的 CSS 特性

autoprefixer

添加了 vendor 浏览器前缀，它使用 Can I Use 上面的数据。

postcss-preset-env

允许你使用未来的 CSS 特性。

更佳的 CSS 可读性

postcss-sorting

给规则的内容以及@规则排序。

postcss-utilities

囊括了最常用的简写方式和书写帮助。

short

添加并拓展了大量的缩写属性。

图片和字体

postcss-assets

可以插入图片尺寸和内联文件。

postcss-sprites

能生成雪碧图。

font-magician

生成所有在 CSS 里需要的 @font-face 规则。

postcss-inline-svg

允许你内联 SVG 并定制它的样式。

postcss-write-svg

允许你在 CSS 里写简单的 SVG。

提示器（Linters）

stylelint

是一个模块化的样式提示器。

stylefmt

是一个能根据 stylelint 规则自动优化 CSS 格式的工具。

doiuse

提示 CSS 的浏览器支持性，使用的数据来自于 Can I Use。

colorguard

帮助你保持一个始终如一的调色板。

其它

postcss-rtl

在单个 CSS 文件里组合了两个方向（左到右，右到左）的样式。

cssnano

是一个模块化的 CSS 压缩器。

lost

是一个功能强大的 calc() 栅格系统。

rtlcss

镜像翻转 CSS 样式，适用于 right-to-left 的应用场景。

语法

PostCSS 可以转化样式到任意语法，不仅仅是 CSS。如果还没有支持你最喜欢的语法，你可以编写一个解释器以及（或者）一个 stringifier 来拓展 PostCSS。

sugarss

是一个以缩进为基础的语法，类似于 Sass 和 Stylus。

postcss-syntax

通过文件扩展名自动切换语法。

postcss-html

解析类 HTML 文件里style标签中的样式。

postcss-markdown

解析 Markdown 文件里代码块中的样式。

postcss-jsx

解析源文件里模板或对象字面量中的CSS。

postcss-styled

解析源文件里模板字面量中的CSS。

postcss-scss

允许你使用 SCSS (但并没有将 SCSS 编译到 CSS)。

postcss-sass

允许你使用 Sass (但并没有将 Sass 编译到 CSS)。

postcss-less

允许你使用 Less (但并没有将 LESS 编译到 CSS)。

postcss-less-engine

允许你使用 Less (并且使用真正的 Less.js 把 LESS 编译到 CSS)。

postcss-js

允许你在 JS 里编写样式，或者转换成 React 的内联样式／Radium／JSS。

postcss-safe-parser

查找并修复 CSS 语法错误。

midas

将 CSS 字符串转化成高亮的 HTML。

安装并使用stylelint，postcss

安装这些依赖

script中添加以下代码

配置stylelint

新增.stylelint.cjs文件

module.exports = {
  defaultSeverity: 'error',
  extends: ['stylelint-config-prettier'],
  plugins: ['stylelint-less', 'stylelint-order'],
  overrides: [
    {
      files: ['**/*.vue'],
      customSyntax: 'postcss-html',
    },
    {
      files: ['**/*.less'],
      customSyntax: 'postcss-less',
    },
  ],
  rules: {
    // 属性的排序
    "order/properties-order": [
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index",
      "display",
      "justify-content",
      "align-items",
      "float",
      "clear",
      "overflow",
      "overflow-x",
      "overflow-y",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "border",
      "border-style",
      "border-width",
      "border-color",
      "border-top",
      "border-top-style",
      "border-top-width",
      "border-top-color",
      "border-right",
      "border-right-style",
      "border-right-width",
      "border-right-color",
      "border-bottom",
      "border-bottom-style",
      "border-bottom-width",
      "border-bottom-color",
      "border-left",
      "border-left-style",
      "border-left-width",
      "border-left-color",
      "border-radius",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "width",
      "min-width",
      "max-width",
      "height",
      "min-height",
      "max-height",
      "font-size",
      "font-family",
      "font-weight",
      "text-align",
      "text-justify",
      "text-indent",
      "text-overflow",
      "text-decoration",
      "white-space",
      "color",
      "background",
      "background-position",
      "background-repeat",
      "background-size",
      "background-color",
      "background-clip",
      "opacity",
      "filter",
      "list-style",
      "outline",
      "visibility",
      "box-shadow",
      "text-shadow",
      "resize",
      "transition"
    ],
  }
};

可以添加.stylelintignore文件
作用可参考其他的ignore文件，如.gitignore,.eslintignore等

# .stylelintignore
# 旧的不需打包的样式库
*.min.css

# 其他类型文件
*.js
*.jpg
*.woff

测试

在home.vue的样式中添加以下代码，同时新建一个less文件写以下代码，然后我们开启校验

.user-info{
    &-name{
        color:red;
        position: relative;
    }
    &-role{
        color:blue;
    }
}

本文就分享到这里了，封装代码我放在了我的git仓库下期再见!

前言