stylelint-theme-variable-plugins v0.0.8

简介

本插件基于stylelint,项目中如果设置了通用变量，可以通过它来实现项目中样式的文件对变量的实施情况，检测到变量中的值会提醒开发者应该调用变量，而非直接使用值。从而实现通过变量控制项目中的整体样式。

安装

npm安装

npm i stylelint stylelint-theme-variable-plugins -D

yarn安装

yarn add stylelint stylelint-theme-variable-plugins -D

使用

在项目根目录中新建.stylelintrc.js文件，并加入如下代码。 其中theme为你项目中的样式变量，一般应该是less或sass，由于插件只能接收对象，所以这里建议通过脚本生成less或sass及json文件使变量内容能对应上。

针对不同的预处理，添加对应的语法支持

下面列举常用的less和scss需要使用的配置,在配置文件"customSyntax"设置上即可

• less需要安装postcss-less
• sass需要安装postcss-scss(注意：这里是postcss-scss不是postcss-sass，这两个不是一个东西)

默认规则

本插件也提供了一些默认的规则配置，可以在"extends"作指向。

目前的配置内容仅支持stylint15版本

const theme = require('./src/assets/theme/default.json');

module.exports = {
  "ignoreFiles": ["src/assets/less/**/*.less"],
  "plugins": ["stylelint-theme-variable-plugins"],
  "extends": "stylelint-theme-variable-plugins/config",
  "customSyntax": "postcss-less",
  "rules": {
    "stylelint-check/props-variable-use": {
      "theme": theme,
    },
  }
}

参数

使用命令行检测单个文件

1. 全局安装styelint

npm i stylelint -g

2. 执行命令

stylelint path/to/your.less --formatter unix