@acta/rollup-plugin-postcss 中文文档教程

Question

Rollup PostCSS @acta/rollup-plugin-postcss

一个汇总插件到使用 PostCSS 将转译后的样式文件导入为模块。

Table of Contents

• Parsing URLs
• Formating URLs
• Dev scripts

Use with rollup

使用 npm i -D @acta/rollup-plugin-postcss 安装。 然后在您的配置文件中：

...
import postCSS from '@acta/rollup-plugin-postcss';
...
  ...
  plugins: [
    ...
    postCSS({
      minified: true,
      includes: ['.sass', '.scss'],
      excludes: ['node_modules'],
      presetEnv: {
        stage: 2,
        features: [],
        browsers: 'defaults',
      }
    }),
    ...
  ],
  ...

Parametters

所有参数都是可选的。

• minified: boolean, should the styles be minified.
• incldues: the file complete path (en: /Volumes/Projects/foo/bar.scss) contains at least one of the elements of the array. Default value is ['.css', '.pcss', '.sass', '.scss'].
• excludes: the file complete path does not contain any of the elements of the array. Default value is ['node_modules'].
• presetEnv: see https://github.com/csstools/postcss-preset-env for complete details.

Input and output

如果您有以下样式文件：

$mainColor: #00c;

body {
  color: #000;
}

.__SCOPE {
  color: #c00;

  > .example {
    color: $mainColor;
  }
}

并使用 import AppStyles from './AppStyles.scss'; 将它们导入到 JavaScript 文件中，您将获得此对象：

{
  hash: '_a7af0989',
  style: `body{
    color:#000
    }
    ._a7af0989{
      color:#c00
    }
    ._a7af0989 > .example{
      color:#00c
    }`
}

它应该被注入到 DOM 中的 style 标签。

如果您在选项中传递 minified: true，styles 的值将被缩小，并且将是：body{color:#000}._8fd83ea9dc8f28944de69aac4284bba3{color:# c00}._8fd83ea9dc8f28944de69aac4284bba3>.example{color:#00c}