javascript CSS 模块不适用于 React 版本 16.6.0
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53062306/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS modules not working for react version 16.6.0
提问by bizimunda
I was trying to use CSS Modules in React.
我试图在 React 中使用 CSS 模块。
Here my code of App.js
这是我的 App.js 代码
import React from 'react';
import styles from './index.css'
const App = () => {
const REACT_VERSION = React.version;
return (
<div>
Main app
<div style={styles.test}>Green</div>
<div>Yellow</div>
<div>React version: {REACT_VERSION}</div>
</div>
);
};
export default App;
Here is my code of index.css
这是我的 index.css 代码
.test {
background: black;
color: white;
font-size: 34px;
border: 34px;
}
Here is the output
这是输出
I know that I have to modify
我知道我必须修改
- webpack.config.dev.js
- webpack.config.prod.js
- webpack.config.dev.js
- webpack.config.prod.js
but when I read thisarticle I could not find that code.
但是当我阅读这篇文章时，我找不到那个代码。
回答by pflevy
I had this same problem and solved it by renaming my css file to:
我遇到了同样的问题，并通过将我的 css 文件重命名为：
myName.module.css
and also importing like this:
并且还像这样导入：
import styles from './myName.module.css'
There is no need to follow the steps of updating the webpack files any more.
无需再按照更新 webpack 文件的步骤进行操作。
回答by Nemesius
The person in other question was totally right but with a little mistake, without updating the config you can do it. Just put .modulein front of your name of css file like that:
另一个问题中的人完全正确，但有一点错误，无需更新配置即可完成。.module像这样把你的css文件名放在前面：
myName.module.css
Then call it :
然后调用它：
import styles from './myName.module.css'
Working on React 16.6
在 React 16.6 上工作
回答by Mohammad Gharloghi
in react 16.13 and [email protected]and higher you don't need to eject your project.
Your CSS files must be named camelCase + .modules.css and import to your projects like this:
在 react 16.13 及 [email protected]更高版本中，您不需要弹出您的项目。你的 CSS 文件必须命名为 camelCase + .modules.css 并像这样导入到你的项目中：
import React, { Component } from 'react';
import styles from './app.module.css'; // Import css modules stylesheet as styles
class App extends Component {
render() {
return <button className={styles.test}>Error Button</button>;
}
}
export default App;
and in app.module.css
并在 app.module.css
.test{
color: blue;
}
if you eject projects, in webpack.config.jsfile, in css modules change like this:
如果您弹出项目，在webpack.config.js文件中，在 css 模块中更改如下：
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
回答by ealgehdr
I don't know if you found solution or not but this worked for me. I was following a tutorial to use CSS module but tutor's react version was different from mine. he had react 16.0.0, and I have 16.7.0. I don't have dev or prod version on webpack. I only have webpack.config.js. so what I did, I had a code on line 400
我不知道您是否找到了解决方案，但这对我有用。我正在学习使用 CSS 模块的教程，但导师的反应版本与我的不同。他有反应 16.0.0，我有 16.7.0。我在 webpack 上没有 dev 或 prod 版本。我只有 webpack.config.js。所以我做了什么，我在第 400 行有一个代码
{
test: cssRegex, // cssRegex defined above as /\.css$/;
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
//this is the code tutor wrote.
//================================================
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
localIdentName: '[name]__[local]__[hash:base64:5]'
//================================================
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
I hope it helps.
我希望它有帮助。
Note: the only thing I wrote is what I mentioned in block, everything else was already there.
注意：我只写了我在块中提到的内容，其他所有内容都已经存在。
回答by Ayush Kanoongo
I think this work for you.
我认为这对你有用。
- My react version is 16.8.2 and after 16.2.0 you don't have config/webpack.config.dev.jsor config/webpack.config.prod.jsversion on webpack.
You only have config/webpack.config.jsand config/webpackDevServer.config.jsfiles after eject operation in react app.So to resolve this issue open config/webpack.config.jsfile and update these changes.(See line:- 391 to 464)
{ test: cssRegex, exclude: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, modules: true, getLocalIdent: getCSSModuleLocalIdent, localIdentName: '[name]__[local]__[hash:base64:5]' }), // Don't consider CSS imports dead code even if the // containing package claims to have no side effects. // Remove this when webpack adds a warning or an error for this. // See https://github.com/webpack/webpack/issues/6571 sideEffects: true, }, // Adds support for CSS Modules (https://github.com/css-modules/css-modules) // using the extension .module.css { test: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, modules: true, getLocalIdent: getCSSModuleLocalIdent, localIdentName: '[name]__[local]__[hash:base64:5]' }), }, // Opt-in support for SASS (using .scss or .sass extensions). // By default we support SASS Modules with the // extensions .module.scss or .module.sass { test: sassRegex, exclude: sassModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, modules: true, getLocalIdent: getCSSModuleLocalIdent, localIdentName: '[name]__[local]__[hash:base64:5]' }, 'sass-loader' ), // Don't consider CSS imports dead code even if the // containing package claims to have no side effects. // Remove this when webpack adds a warning or an error for this. // See https://github.com/webpack/webpack/issues/6571 sideEffects: true, }, // Adds support for CSS Modules, but using SASS // using the extension .module.scss or .module.sass { test: sassModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, modules: true, getLocalIdent: getCSSModuleLocalIdent, localIdentName: '[name]__[local]__[hash:base64:5]' }, 'sass-loader' ), },
- 我的 react 版本是 16.8.2，在 16.2.0 之后，webpack 上没有config/webpack.config.dev.js或config/webpack.config.prod.js版本。
在 react app 中执行弹出操作后，您只有config/webpack.config.js和config/webpackDevServer.config.js文件。所以要解决此问题，请打开config/webpack.config.js文件并更新这些更改。（见行：- 391 到 464）
{ test: cssRegex, exclude: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, modules: true, getLocalIdent: getCSSModuleLocalIdent, localIdentName: '[name]__[local]__[hash:base64:5]' }), // Don't consider CSS imports dead code even if the // containing package claims to have no side effects. // Remove this when webpack adds a warning or an error for this. // See https://github.com/webpack/webpack/issues/6571 sideEffects: true, }, // Adds support for CSS Modules (https://github.com/css-modules/css-modules) // using the extension .module.css { test: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, modules: true, getLocalIdent: getCSSModuleLocalIdent, localIdentName: '[name]__[local]__[hash:base64:5]' }), }, // Opt-in support for SASS (using .scss or .sass extensions). // By default we support SASS Modules with the // extensions .module.scss or .module.sass { test: sassRegex, exclude: sassModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, modules: true, getLocalIdent: getCSSModuleLocalIdent, localIdentName: '[name]__[local]__[hash:base64:5]' }, 'sass-loader' ), // Don't consider CSS imports dead code even if the // containing package claims to have no side effects. // Remove this when webpack adds a warning or an error for this. // See https://github.com/webpack/webpack/issues/6571 sideEffects: true, }, // Adds support for CSS Modules, but using SASS // using the extension .module.scss or .module.sass { test: sassModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, modules: true, getLocalIdent: getCSSModuleLocalIdent, localIdentName: '[name]__[local]__[hash:base64:5]' }, 'sass-loader' ), },
回答by Rufat Gulabli
Your CSS files must be named like "yourFileName.module.css". And import into your JS file like below: import yourVariableNamefrom "./yourFileName.module.css";
您的 CSS 文件必须命名为“ yourFileName.module.css”。然后像下面这样导入到你的 JS 文件中： import yourVariableNamefrom " ./yourFileName.module.css";
Works fine on React version:
在 React 版本上运行良好：
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "3.1.0"
回答by Nayan Thakkar
I think it will definitely help you out. open config/webpack.config.js and find block like this.
我想它肯定会帮助你。打开 config/webpack.config.js 并找到这样的块。
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders(
{
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'css-loader'
),
sideEffects: true,
},
and change that like this :
并像这样改变它：
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
localIdentName: '[name]__[local]__[hash:base64:5]'
}
}),
sideEffects: true,
},
Do same for cssModuleRegex block right after above block and restart your server and you'll get css modules enabled.
在上面的块之后立即对 cssModuleRegex 块执行相同的操作并重新启动您的服务器，您将启用 css 模块。
回答by Peter
It depends on the React version as you know. The recent version requires you to name CSS and sass files as follows:
如您所知，这取决于 React 版本。最新版本要求您按如下方式命名 CSS 和 sass 文件：
[name].moudle.css or [name].moudule.scss.
If renaming files this way is not working. you should enable it manual. if you did create your project with react-create-app and didn't eject it to have access to all your config files. do as follow :
如果以这种方式重命名文件不起作用。你应该手动启用它。如果您确实使用 react-create-app 创建了项目并且没有弹出它以访问所有配置文件。做如下：
npm run eject
it will create a config folder. inside that config file open your webpack.config files(there should be two) you have to add this in your test: /.css$/ option :
它将创建一个配置文件夹。在该配置文件中打开你的 webpack.config 文件（应该有两个）你必须在你的测试中添加这个：/.css$/ 选项：
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
it should look like this
它应该是这样的
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
},
},
do it in both webpack.config files
在两个 webpack.config 文件中执行
Note: do note tweak something else there unless you know what you are doing
注意：除非您知道自己在做什么，否则请注意在那里调整其他内容
回答by ilhanekiz
You have to create the project in this way:
create-react-app projectname --scripts-version 1.1.5Apply:
npm run ejectCSS-loader to
webpack.config.prod.jsandwebpack.config.dev.jsfiles. It is necessary to add the following settings for options. Otherwise, react CSS modules structure does not work.{ loader: require.resolve('css-loader'), options: { importLoaders: 1, modules: true, localIdentName:'[name]__[local]__[hash:base64:5]' }
您必须以这种方式创建项目：
create-react-app projectname --scripts-version 1.1.5申请：
npm run ejectCSS-loader 到
webpack.config.prod.js和webpack.config.dev.js文件。有必要为选项添加以下设置。否则，react CSS 模块结构不起作用。{ loader: require.resolve('css-loader'), options: { importLoaders: 1, modules: true, localIdentName:'[name]__[local]__[hash:base64:5]' }
回答by Lalji Tadhani
Add class instead of style like
添加类而不是样式
<div className="test">Green</div>
