Style 插件

@kokojs/plugin-style 提供了预处理 CSS 的能力，支持 Sass 语法，不再支持原有的 precss、sass-like 等语法。

安装

yarn add @kokojs/plugin-style --dev

安装完成后，在 koko.config.js 中添加如下配置：

module.exports = {
  plugins: {
    style: {},
  },
};

配置项

extract

• Type: boolean
• Default: true

是否将样式提取至独立的 CSS 文件中。

禁用该选项时，样式将打包到 JS 文件中，并通过 style-loader 注入到页面上。

postcssPlugins

• Type: PostcssPlugin[]
• Default: undefined

koko-plugin-style 默认包含 autoprefixer 插件，通过此选项可以配置额外的 postcss 插件

// koko.config.js
module.exports = {
  plugins: {
    style: {
      postcssPlugins: [require('some-postcss-plugin')],
    },
  },
};

loaderOptions

• Type: object
• Default: -

传递给 loader 的选项，支持以下 loader：

• css-loader
• sass-loader
• style-loader
• postcss-loader

// koko.config.js
module.exports = {
  plugins: {
    style: {
      loaderOptions: {
        css: {
          // css-loader 选项
        },
        sass: {
          // sass-loader 选项
        },
        style: {
          // style-loader 选项，仅在设置 extract: false 后有效
        },
        postcss: {
          // postcss-loader 选项
        },
      },
    },
  },
};

enableDevAutoprefixer

• Type: boolean
• Default: false

是否在 dev 模式下启用 postcss 的 autoprefixer 插件，注意开启后会降低 dev 的编译速度。

默认情况下，我们仅在 build 阶段启用 postcss 和 autoprefixer 插件。

customStyleLoader

• Type: (extract?: boolean) => string
• Default: style-loader

加载自定义 style-loader 的方法，可用于替换内置的默认样式注入行为。

// koko.config.js
module.exports = {
  plugins: {
    style: {
      customStyleLoader: () => require.resolve('./my-style-loader'),
    },
  },
};

globalModules

• Type: boolean
• Default: false

当 globalModules 为 true 时，所有样式文件都会开启 CSS Modules。

CSS Modules

koko 根据文件后缀名来判断是否启用 CSS Modules:

• .css 和 .scss 文件默认不支持 CSS Modules，若 globalModules 为 true，则支持 CSS Modules，作用域为 :global
• .m.css 和 .m.scss 文件支持 CSS Modules，默认作用域为 :local
• .global.m.css 和 .global.m.scss 文件支持 CSS Modules，默认作用域为 :global

维护者

陈嘉涵。