Reactjs CSS模块不起作用,反应16
我已经安装了css加载器和样式加载器。然后我配置了webpack.dev和webpack.prod。 我认为webpack有问题,因为组件的语法并不复杂。 该组件将忽略样式。为什么? package.jsonReactjs CSS模块不起作用,反应16,reactjs,webpack,css-modules,Reactjs,Webpack,Css Modules,我已经安装了css加载器和样式加载器。然后我配置了webpack.dev和webpack.prod。 我认为webpack有问题,因为组件的语法并不复杂。 该组件将忽略样式。为什么? package.json "dependencies": { "css-loader": "^0.28.11", "prop-types": "^15.6.1", "react": "^16.2.0", "react-dom": "^16.2.0", "react-route
"dependencies": {
"css-loader": "^0.28.11",
"prop-types": "^15.6.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.1",
"style-loader": "^0.20.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject"`enter code here`: "react-scripts eject"
}
webpack.config.dev.js
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
},
},
webpack.config.prod.js
test: /\.css$/,
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
},
},
use: [
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]',
minimize: true,
sourceMap: shouldUseSourceMap,
},
},
组成部分
import React, { Component } from 'react';
import styles from './addTask.css';
export default class AddTask extends Component {
render() {
return (
<div className={styles.big}>
this should be a big font
</div>
);
}
}
.big {
font-size: 111px;
}
你能为你的网页配置文件尝试以下语法吗
你能为你的网页配置文件尝试以下语法吗
我也有同样的问题。正在使用git跟踪文件 在运行npm之前,请在webpack.config文件中运行eject进行编辑,我已经添加了react包并将其提交到repo中
然后我运行npm run eject并添加了上述更改。我又重新启动了npm,它对我有效。我也遇到了同样的问题。正在使用git跟踪文件 在运行npm之前,请在webpack.config文件中运行eject进行编辑,我已经添加了react包并将其提交到repo中
然后我运行npm run eject并添加了上述更改。我再次重新启动npm,它对我有效。尝试将它粘贴到测试下方:/.css$/。它帮助了我
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules:true,
localIdentName:'[name]__[local]__[hash:base64:5]'
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
尝试将其粘贴到以下测试:/.css$/。它帮助了我
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules:true,
localIdentName:'[name]__[local]__[hash:base64:5]'
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
重命名为并将导入更改为重命名为并将导入更改为为了让react了解您的css文件是一个css模块,您需要在使用比2.0.0更新的react脚本版本时将后缀.module添加到文件名中 import styles from './addTask.module.css' 只需将addTask.css重命名为addTask.module.css,并将导入更改为: import styles from './addTask.module.css'
import styles from './addTask.module.css'
为了让react理解您的css文件是一个css模块,您需要在使用比2.0.0更新的react脚本版本时,在文件名中添加后缀.module 只需将addTask.css重命名为addTask.module.css,并将导入更改为: import styles from './addTask.module.css'
import styles from './addTask.module.css'
检查DOM中的输出-是否应用了类名?如果是这样的话,是css模块加载器选项中指定的损坏还是太大?另外,在开发模式下,不要使用extracttextplugin,它会将css加载到外部文件中。如果您没有在html中包含该文件,它将无法工作。在开发模式下,让样式加载器通过javascriptCheck在项目中插入css。希望有帮助!你要去哪里?你确定它正在加载吗?看看webpack extract text插件,我已经检查了DOM中的输出-没有任何类名应用于div。但原因是什么?检查DOM中的输出-是否应用了类名?如果是这样的话,是css模块加载器选项中指定的损坏还是太大?另外,在开发模式下,不要使用extracttextplugin,它会将css加载到外部文件中。如果您没有在html中包含该文件,它将无法工作。在开发模式下,让样式加载器通过javascriptCheck在项目中插入css。希望有帮助!你要去哪里?你确定它正在加载吗?看看webpack extract text插件,我已经检查了DOM中的输出-没有任何类名应用于div。但原因是什么?这对我来说很有效。仅供参考,im使用react的16.7版本。编辑webpack.config.js的所有示例现在都没用了,因为我认为它内置的alreadyth适合我。仅供参考,im使用react的16.7版本。编辑webpack.config.js的所有示例现在都没用了,因为我认为它已经内置了