CSS Modules Require Hook 项目常见问题解决方案

css-modules-require-hook A require hook to compile CSS Modules in runtime 项目地址: https://gitcode.com/gh_mirrors/cs/css-modules-require-hook

1. 项目基础介绍和主要编程语言

css-modules-require-hook 是一个用于在运行时编译 CSS Modules 的 require 钩子。它类似于 Babel 的 babel/register，可以在 Node.js 环境中实现 CSS Modules 的本地作用域。CSS Modules 是一种 CSS 文件，其中所有的类名和动画名默认都是局部作用域的。这个项目主要使用 JavaScript 编程语言，依赖于 Node.js 环境。

2. 新手使用项目时需特别注意的问题及解决步骤

问题一：如何安装和使用 `css-modules-require-hook`

问题描述： 新手可能不知道如何正确安装和使用这个项目。

解决步骤：

确保你的 Node.js 环境版本是 0.12.x 或更高。
使用 npm 命令安装 css-modules-require-hook：
```
npm i css-modules-require-hook
```

在你的项目中手动引入并配置钩子，或者使用预设文件进行配置。

手动引入：

const hook = require('css-modules-require-hook');
hook({
  generateScopedName: '[name]__[local]___[hash:base64:5]'
});

使用预设文件： 创建一个 cmrh.conf.js 文件，并配置如下：

module.exports = {
  generateScopedName: '[name]__[local]___[hash:base64:5]'
};

然后引入 css-modules-require-hook/preset：

require('css-modules-require-hook/preset');

问题二：如何在使用 Babel-node 或 ES6 导入时使用 `css-modules-require-hook`

问题描述： 当使用 Babel-node 或 ES6 导入语法时，新手可能不清楚如何集成 css-modules-require-hook。

解决步骤：

在使用 Babel-node 或 ES6 导入语法的目录中创建一个 cmrh.conf.js 文件。

配置该文件，如下所示：

module.exports = {
  generateScopedName: '[name]__[local]___[hash:base64:5]'
};

在你的项目中，首先导入 css-modules-require-hook/preset：
```
import csshook from 'css-modules-require-hook/preset';
```
然后导入其他路由或模块，例如：
```
import routes from '/shared/views/routes';
```

问题三：如何在开发模式下使 CSS Modules 生效

问题描述： 新手可能不清楚如何在开发模式下使 CSS Modules 生效，以便于进行调试。

解决步骤：

设置环境变量 NODE_ENV 为 development：
```
NODE_ENV=development node server.js
```

或者，你可以直接在代码中使用 devMode 选项来覆盖由环境变量设置的行为。

const hook = require('css-modules-require-hook');
hook({
  generateScopedName: '[name]__[local]___[hash:base64:5]',
  devMode: true
});

css-modules-require-hook A require hook to compile CSS Modules in runtime 项目地址: https://gitcode.com/gh_mirrors/cs/css-modules-require-hook

标签

CSS Modules Require Hook 项目常见问题解决方案