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

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

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

解决步骤：

1. 确保你的 Node.js 环境版本是 0.12.x 或更高。

2. 使用 npm 命令安装 css-modules-require-hook：

   npm i css-modules-require-hook
   

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

   • 手动引入：

     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。

解决步骤：

1. 在使用 Babel-node 或 ES6 导入语法的目录中创建一个 cmrh.conf.js 文件。
2. 配置该文件，如下所示：

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

3. 在你的项目中，首先导入 css-modules-require-hook/preset：

   import csshook from 'css-modules-require-hook/preset';
   

4. 然后导入其他路由或模块，例如：

   import routes from '/shared/views/routes';
   

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

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

解决步骤：

1. 设置环境变量 NODE_ENV 为 development：

   NODE_ENV=development node server.js
   

2. 或者，你可以直接在代码中使用 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