CSS 模块需要钩

需要的钩子编译 CSS 模块 在运行时间。 这和Babel的差不多 贝贝尔/登记员。见实例: 演示。 。 。 .

这是叉子 css-moules-requere-hook (英语) 升级以依赖最新的依赖关系,并固定一些问题.

什么是 CSS 模块

A 类 CSS 模块 是一个 CSS 文件,默认情况下所有类名和动画名都会在本地范围进行。 在文章中学习更多 CSS模块 - 欢迎来到未来 格伦·马德恩著.

特征

以运行时间编译, 普遍 用途.

所需资源

为了使用我们所需要的工具 节点.js v0.12.x (或更上层.

安装

$ npm install @dr.pogodin/css-modules-require-hook

使用量

现在,附加钩子有两种方法:手动或使用预设文件.

第一个允许您在模块需要后手动通过选项 。 示例

const hook = require('@dr.pogodin/css-modules-require-hook');

hook({
  generateScopedName: '[name]__[local]___[hash:base64:5]',
});

// const styles = require('./icon.css');

第二个允许您将选项移至单独的文件 cmrh.conf.js。配置文件应位于执行器所在的同一目录或其祖先目录中。 这样一来 钩子就在后面 @dr.pogodin/css-modules-require-hook/preset 需要模块。 示例

// cmrh.conf.js
module.exports = {
  generateScopedName: '[name]__[local]___[hash:base64:5]',
};

require('@dr.pogodin/css-modules-require-hook/preset');

// const styles = require('./icon.css');

使用 Bail-node / ES6 导入

您需要创建一个 cmrh.conf.js 在目录中导入文件 @dr.pogodin/css-modules-require-hook。 。 。 .

// server.js
import csshook from '@dr.pogodin/css-modules-require-hook/preset' // import hook before routes
import routes from '/shared/views/routes'

// create server, etc

// cmrh.conf.js
module.exports = {
  // Same scope name as in webpack build
  generateScopedName: '[name]__[local]___[hash:base64:5]',
}

开发模式

通常,Node.js会缓存所有 require 默认调用。 要为开发目的取消缓存, 您应该设置环境变量 NODE_ENV 改为 development。例如:

$ NODE_ENV=development node server.js

还可以用 devMode 选项(见下文)以覆盖由环境变量强制实施的行为.

添加自定义 PostCSS 插件

var hook = require('@dr.pogodin/css-modules-require-hook');
var cssnext = require('cssnext');

hook({
  prepend: [
    // adding CSS Next plugin
    cssnext(),
  ],
});

指定用于构建通用名称的自定义模式

var hook = require('@dr.pogodin/css-modules-require-hook');

hook({
  generateScopedName: '[name]__[local]___[hash:base64:5]',
});

使用 Stylus 作为预处理器

var hook = require('@dr.pogodin/css-modules-require-hook');
var stylus = require('stylus');

hook({
  extensions: ['.styl'],
  preprocessCss: function (css, filename) {
    return stylus(css)
      .set('filename', filename)
      .render();
  },
});

// var styles = require('./demo.styl');

调试( 选项)

要调整要求的钩子,您需要为导出函数提供参数.

var hook = require('@dr.pogodin/css-modules-require-hook');

hook({
  // append: [],
  // generateScopedName: function () {},
  // or any other options
  // see the list below
});

devMode 布尔

帮助您取消全部缓存 require 打电话 通常用于开发目的. 也超越行为 NODE_ENV 环境变量。 例如:

hook({
  devMode: false,
});

extensions 数组

将要求的勾钩附加到额外的文件扩展名( 例如 ) ['.scss']) (中文(简体) ).

ignore 函数正弦

提供了将特定文件排除在处理之外的可能性。 支持 glob 和正则表达式语法 。 您也可以提供自定义功能 .

preprocessCss 函数

在罕见的情况下,您可能想要预先编译样式,然后将其传递到PostCSS管道. 你应该用 同步 转变,自 require 函数是同步的.

hook({
  /**
   * @param  {string} css
   * @param  {string} filepath Absolute path to the file
   * @return {string}
   */
  preprocessCss: function (css, filepath) {
    return css;
  }
});

processCss 函数

在罕见的情况下, 您可能想要在运行时获得编译样式, 因此提供此选项会有所帮助 .

hook({
  /**
   * @param  {string} css
   * @param  {string} filepath Absolute path to the file
   */
  processCss: function (css, filepath) { /* */ }
});

processorOpts 对象

提供将自定义选项传递给 LazyResult 实例。如果想要设置自定义解析器,它可以有用,例如: 无员额。 。 。 .

const hook = require('@dr.pogodin/css-modules-require-hook');
const lessParser = require('postcss-less').parse;

hook({
  extensions: '.less',
  processorOpts: {parser: lessParser},
});

camelCase boolean|string

骆驼会输出类名. 类似 css-loader? 骆驼场。 。 。 .

可用的选项 : true, (中文(简体) ), dashes, (中文(简体) ), only, (中文(简体) ), dashesOnly。 。 。 .

append 数组

将自定义插件添加到 PostCSS 管道的末尾. 自从 require 函数是同步的,应当只提供同步插件.

prepend 数组

预置自定义插件到 PostCSS 管道的开始. 自从 require 函数是同步的,应当只提供同步插件.

use 数组

向管道提供 PostCSS 插件的全部列表 。 提供此取消 append, (中文(简体) ), prepend, (中文(简体) ), createImportedName, (中文(简体) ), generateScopedName 选项。 只同步插件 .

createImportedName 函数

缩略名 邮箱-模块-摘录-进口 插头 createImportedName 选项.

generateScopedName 字符串函数

缩略名 邮政模块扫描仪 插件的选项 。 帮助您指定为类选择者构建通用名称的自定义方式. 您也可以使用类似于 Webpack 的字符串模式 装弹机。 。 。 .

hook({
  generateScopedName: '[name]__[local]___[hash:base64:5]'
});

或者说

hook({
  /**
   * @param  {string} name     Usually a class name
   * @param  {string} filepath
   * @param  {string} css
   * @return {string}
   */
  generateScopedName: function (name, filepath, css) {
    return name;
  }
});

hashPrefix 字符串

缩略名 通用名称 帮助选项 . 提供了额外的散列独有性. 对于多个样式表共享同名的项目可能有用 .

mode 字符串

缩略名 postcs- 模块- 本地默认 插件的选项 .

resolve 对象

改变解决ICSS进口的路径(@value a from './b.css' 财务报告和审定财务报表 composes a from './b.css'。支持:

• resolve.alias object
• resolve.extensions array —— 默认值 ['.css']。 。 。 .
• resolve.modules array
• resolve.mainFile string —— 默认值 'index.css'。 。 。 .
• resolve.preserveSymlinks boolean —— 默认值 false。 。 。 .

详情见: https://github.com/cs-modules/postcs-modules-resolve-imports#可选办法

rootDir 字符串

提供工程目录的绝对路径. 提供这个功能会生成更好的类名. 它可以是强制性的,如果运行需要钩并构建工具(比如: css-模块化)来自不同的工作目录.

调试

调试 软件包用于调试。 所以,打开它 仅仅指定 吉布提 环境变量 :

• DEBUG=css-modules:fetch 查看已解决的文件路径 .
• DEBUG=css-modules:preset ——看是否找到配置.
• DEBUG=css-modules:setup ——看新选项清单.
• DEBUG=css-modules:* ——看一切处.

链接

• 电子支持 : css-模块-电子

许可证

麻省理工学院许可证