react组件引入css文件在启动的时候提示css: Unexpected token, expected ;

Posted 2023-03-09

大家好，我在做一个react项目，刚接触不久，还是新手我想请教一下:我在一个react组件中import一个CSS模块，为什么run build的时候没提示错误，但npm start就出错了，提示Unexpected token...希望大家能帮我找出问题所在。感激不尽！(已经在webpack里配置了相应loader了)附图：1.终端报错2.react组件（本例为Layout组件，引用1.CSS） 3.CSS文件内容 4.webpack配置 5.package.json依赖图 6.package.json里的scripts(包含build命令和start命令)
react组件——Layout.js

import React from 'react';
import './a.css'
export default class Layout extends React.Component
render()
return (
<div className="app-content">this.props.children</div>
);


a.css
body
background:red;

webpack.config.js


test: /\.css$/,
use: [ 'style-loader','css-loader' ]

参考技术A npm install babel-plugin-css-modules-transform -D

根目录添加一个.babelrc的文件，写入：

    "plugins": ["css-modules-transform"]

layout.js

import CustomCss from './a.css'

<div className='CoustomCss.hahaha'>
111111
</div>

a.css

.hahaha  background-color: red; 

追问

你好，我贴了部分代码上去了，你看这样行不 或者我把项目打包给你 您再帮忙看下？？

追答

111111

本回答被提问者和网友采纳