css-modulesify

一个用于加载CSS Modules 的browserify 插件。

请注意，这仍然是高度实验性的。

为什么使用 CSS 模块？

通常，您需要使用严格的命名约定，例如 BEM，以确保一个组件的 CSS 不会与另一个组件的 CSS 冲突。CSS 模块是局部范围的，这允许您使用在组件上下文中有意义的名称，而不会出现名称冲突的任何危险。

阅读 Mark Dalgleish 出色的“End of Global CSS”并查看css-modules以获取更多上下文。

入门

首先安装软件包： npm install --save css-modulesify

然后您可以将其用作 browserify 插件，例如： browserify -p [ css-modulesify -o dist/main.css ] example/index.js

在里面，example/index.js您现在可以将 css 加载到您的脚本中。当您这样做时var box1 = require('./box1.css')，box1将是一个对象，用于查找该文件中选择器之一的本地化类名。

因此，要将类应用于元素，您可以执行以下操作：

var styles = require('./styles.css');
var div = `<div class="${styles.inner}">...</div>`;

生成的 css 将包含您使用的任何 css 的本地范围版本require，并将写出到您在--outputor-o选项中指定的文件中。

接口使用

var b = require('browserify')();
 
b.add('./main.js');
b.plugin(require('css-modulesify'), {
  rootDir: __dirname,
  output: './path/to/my.css'
});
 
b.bundle();

// or, get the output as a stream
var b = require('browserify')();
var fs = require('fs');
 
b.add('./main.js');
b.plugin(require('css-modulesify'), {
  rootDir: __dirname
});
 
var bundle = b.bundle()
b.on('css stream', function (css) {
  css.pipe(fs.createWriteStream('mycss.css'));
});

选项：

• rootDir: 项目根目录的绝对路径。这是可选的，但提供它会产生更好的类名。basedir如果rootDir未指定，css-modulesify 将尝试使用 browserify ，如果两者都未指定，它将使用执行命令的位置。
• output: 写入生成的 css 的路径。如果未提供，您将需要监听包上的'css stream'事件以获取输出。
• jsonOutput: 编写类名的 json 清单的可选路径。
• use：可选的 postcss 插件数组（默认情况下我们使用 css-modules 核心插件）。注意：使用更安全after
• before：在运行所需的 css-modules 核心插件之前运行的可选 postcss 插件数组。
• after：在运行所需的 css-modules 核心插件后运行的可选 postcss 插件数组。
• generateScopedName：（仅限 API）一个函数来覆盖创建本地范围类名的默认行为。
• global: 可选的布尔值。设置为true，如果你想css-modulesify申请node_modules以及本地文件。您可以在browserify 文档中阅读有关它的更多信息。
• filePattern: 可选的正则表达式字符串，用于指定 css 文件名。（默认值：\.css$）
• cache: 在运行之间持久化缓存的可选对象。

活动

• b.on('css stream', callback)使用包含已编译 CSS 的可读流调用回调。您可以将其写入文件。

在后端使用 CSS 模块

如果你想在服务器生成的模板中使用 CSS 模块，有几个选项：

• 选项 A（仅限 nodejs）：注册require-hook以便其var styles = require('./foo.css')操作方式与前端相同。确保rootDir选项匹配以保证类名相同。

• 选项 B：jsonOutput使用文件路径配置选项，css-modulesify并将生成类名的 JSON 清单。

PostCSS 插件

默认情况下启用以下 PostCSS 插件：

• postcss-modules-local-by-default
• postcss-modules-extract-imports
• postcss-modules-scope
• postcss-modules-values

（即CSS 模块规范）。

您可以通过传递--use|-u到css-modulesify.

或者，如果您只想添加一些额外的插件以在默认之后运行，请将它们添加到postcssAfter数组选项（此时仅 API）。以同样的方式，添加额外的插件postcssBefore以运行默认值之前的插件。

此外，您可能还希望通过传递--plugin.option true.

这方面的一个例子是：

browserify -p [css-modulesify \
  --after autoprefixer --autoprefixer.browsers '> 5%' \
  -o dist/main.css] -o dist/index.js src/index.js

生产用建筑

如果你设置NODE_ENV=production那么css-modulesify会产生短（虽然不太有用）类名。

您还可以通过设置generateScopedName选项手动切换到短名称。例如：

browserify.plugin(cssModulesify, {
  rootDir: __dirname,
  output: './dist/main.css',
  generateScopedName: cssModulesify.generateShortName
})

例子

可以在此处找到示例实现。

执照

麻省理工学院

感谢

• 托比亚斯·科珀斯
• 马克·达格利什
• 格伦·马德恩

乔什·约翰斯顿，2015 年。