@kokojs/plugin-style NPM

Style 插件

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

安装

yarn add @kokojs/plugin-style --dev

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

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

配置项

Type: boolean
Default: true

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

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

Type: PostcssPlugin[]
Default: undefined

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

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

Type: object
Default: -

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

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

Type: boolean
Default: false

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

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

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

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

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

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

维护者

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

9 months ago

11 months ago

12 months ago

11 months ago

8 months ago

12 months ago

11 months ago

11 months ago

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

11 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

10 months ago

11 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

9 months ago

9 months ago

7 months ago

8 months ago

8 months ago

11 months ago

12 months ago

11 months ago

12 months ago

11 months ago

11 months ago

11 months ago

12 months ago

Style 插件

安装

配置项

extract

postcssPlugins

loaderOptions

enableDevAutoprefixer

customStyleLoader

globalModules

CSS Modules

维护者