PostCSS 插件 | The PostCSS plugin

与其他PostCSS 插件一样，你可以使用 stylelint 的 PostCSS 插件

但是，如果有一个专门的 stlyelint 插件 (如 gulp-stylelint 或 grunt-stylelint)，我们推荐你使用它们，因为它们会提供更好输出。

安装

stylelint 是一个 npm 包。使用以下命令进行安装：

npm install stylelint

选项

插件接收一个对象选项作为参数，该对象有以下属性：

`config`

一个 stylelint 配置对象。

如果没有传递 config 或 configFile，stylelint 将查找一个 .stylelintrc 配置文件。

`configFile`

一个包含你的 stylelint 配置对象的 JSON，YAML 或 JS 文件路径。

它应该是绝对路径或是相对于你的程序运行的目录（process.cwd()）的相对路径。我们推荐使用绝对路径。

`configBasedir`

一个定义 extends 和 plugins 的相对路径的目录的绝对路径。

如果你直接通过 config 属性传递一个对象，那么该选项是必须的。如果你使用的是 configFile，那么该选项不是必须的。

如果 config 对象使用相对路径，比如，对于 extends 或 plugins，你需要传递 configBasedir。反之，不需要。

`configOverrides`

部分 stylelint 配置对象的属性将会覆盖已存在的通过 config 选项或 .stylelintrc 文件加载的配置对象。

configOverrides 和 config 选项的不同点在于：如果使用了 config 对象，stylelint 就不会去查找 .stylelintrc 文件了，而是使用你传入的 config 对象；但是，如果你想加载 .stylelintrc 文件而且像覆盖特定的部分，configOverrides就派上用场了。

`ignoreDisables`

如果为 true，所有的禁用注释(比如，/* stylelint-disable block-no-empty */) 将被忽略。

你可以使用该选项查看不使用这样例外的情况下，你的检测结果是怎样的。

`ignorePath`

一个文件的路径，该文件包含要忽略文件的模式。该路径可以是绝对或相对于 process.cwd() 的路径。默认情况下，stylelint 会查找在process.cwd() 中查找 .stylelintignore。查看配置。

用法示例

我们推荐你在应用任何转换之前检测你的 CSS。你可以：

创建一个单独的检测任务，独立于你的构建。
使用 postcss-import 或 postcss-easy-import 的 plugins 选项在转换之前检测你的文件。
将 stylelint 放在你的插件管道前面。

你也需要使用一个报告。stylelint 插件通过 PostCSS 注册警告。因此，你要结合 PostCSS 运行器或其他格式化打印警告的PostCSS 插件来使用。

例A

一个单独的检测任务样例，它使用postcss-less 调用 PostCSS JS API 检测 Less。

注意：stlyelint 的 PostCSS 插件，不像 stylelint 的命令行和 Node API，没有 syntax 选项。因此，必须在PostCSS 选项中设置 syntax，在一个管道中有且只能有一个解析器或语法

var fs = require("fs")
var less = require("postcss-less")
var postcss = require("postcss")

// CSS to be processed
var css = fs.readFileSync("input.css", "utf8")

postcss([
  require("stylelint")({ /* your options */ })
  require("postcss-reporter")({ clearMessages: true })
])
  .process(css, {
    from: "input.css",
    syntax: less
  })
  .then()
  .catch(err => console.error(err.stack))

同样的模式可以被用来检测 SCSS 或 SugarSS 语法。

例B

一个融合了检测和构建任务的样例，插件调用 PostCSS JS API，结合 postcss-import使用(使用它的 plugins 选项)，因此，源文件在转换之前就进行了检测。

var fs = require("fs")
var postcss = require("postcss")
var stylelint = require("stylelint")

// CSS to be processed
var css = fs.readFileSync("lib/app.css", "utf8")

postcss(
  processors: [
    require("postcss-import")({
      plugins: [
        require("stylelint")({ /* your options */ })
      ]
    }),
    require("postcss-cssnext")
    require("postcss-reporter")({ clearMessages: true })
  ]
)
  .process(css, { from: 'lib/app.css', to: 'app.css' })
  .then(function (result) {
    fs.writeFileSync('app.css', result.css);
    if ( result.map ) fs.writeFileSync('app.css.map', result.map);
  })
  .catch(err => console.error(err.stack))

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2018-08-30