css-modulesify中文文档|css-modulesify js中文教程|解析

npm npmdoc 2年前 (2021-12-31) 484次浏览

css-modulesify中文文档|css-modulesify js中文教程|解析

安装命令:npm i css-modulesify

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 插件:

(即CSS 模块规范)。

您可以通过传递--use|-ucss-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 年。

项目贡献人员列表:


极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:css-modulesify中文文档|css-modulesify js中文教程|解析
喜欢 (0)
.excerpt .focus {display:none}