Style 插件

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

安装

``bash
yarn add @kokojs/plugin-style --dev
`

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

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

配置项

$3

- Type: boolean
- Default: true

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

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

$3

- Type: PostcssPlugin[]
- Default: undefined

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

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

$3

- Type: object
- Default: -

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

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

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

$3

- Type: boolean
- Default: false

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

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

$3

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

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

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

$3

- 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`

维护者

陈嘉涵。