我在react程序中使用了less，但是less没有生效
我用了最小的一套，以下是内容
app.tsx：
import React from 'react'
import {
message,
Popover,
Button,
Checkbox,
} from 'antd';
import '../public/antd.css';
import './app.less'
import './test123.less'
// import styles from './app.less';
// import styles2 from './test123.less'
export default class extends React.Component {
dict = null;
onceStorageStart = 0
state = {
show: false,
isDict: false,
}
constructor(props) {
super(props)
this.state = {
show: false,
isDict: false,
}
}
setButton = () => {
let onChange = (e) => {
}
let onChangeClear = (e) => {
}
let onChangeFull = (e) => {
}
return (
<div className='setDiv'>
<Checkbox onChange={onChange}>开启翻译</Checkbox>
<Checkbox onChange={onChangeClear}>清除数据</Checkbox>
<Checkbox onChange={onChangeFull}>全屏</Checkbox>
</div>
)
}
render() {
return (
<div className={`appColor`}>
hi
<span className='appColor1'>i </span>
<Popover content={this.setButton()} title="Title">
<Button type="primary" className={`setBtn`}>
set
</Button>
</Popover>
</div>
)
}
}
test123.less
.appColor1 {
background-color: red;
}
.appColor233 {
background-color: red;
}
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
/** webpack的obj */
const webpackObj = {
entry: {
app: './src/index.tsx',
},
output: {
filename: '[name].bundle.js',
path: __dirname + '/dist',
},
cache: true,
context: path.resolve(__dirname),
mode: process.env.NODE_ENV || 'production',
devtool: 'source-map',
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx', '.less', '.css', '.json'],
alias: {
'@src': path.resolve(__dirname, './src'),
'@common': path.resolve(__dirname, '../basicPublic'),
'@base': path.resolve(__dirname, '.'),
}
},
devServer: {
headers: {
'Access-Control-Allow-Origin': '*'
},
host: '0.0.0.0',
allowedHosts: "all",
static: {
watch: {
poll: true,
ignored: /node_modules/,
},
},
port: 3334,
client: {
overlay: false,
progress: true,
},
},
module: {
rules: [
{
test: /\.(woff|woff2|eot|ttf|otf|png|svg|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 20480,
},
},
},
{
test: /\.css$/,
use: ['style-loader',
'cache-loader',
{
loader: 'css-loader',
options: {
modules: false
}
}
],
},
{
test: /\.(j|t)sx?$/i,
resolve: {
fullySpecified: false,
},
use: [
'cache-loader',
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
}],
},
{
test: /\.less$/,
use: ['style-loader',
'cache-loader',
{
loader: 'css-loader',
options: {
modules: false,
}
},
"less-loader",
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'index.html',
}),
],
performance: {
hints: false,
},
optimization: {
minimize: true,
minimizer: [
],
usedExports: true,
runtimeChunk: true,
},
}
module.exports = webpackObj
package.json
{
"name": "myfront",
"version": "1.0.0",
"description": "",
"author": "",
"sideEffects": false,
"main": "dist/app.tsx",
"scripts": {
"front": "cd ./client && cross-env NODE_ENV=development webpack serve ",
},
"dependencies": {
"@ant-design/icons": "^5.2.6",
"@types/jest": "^29.2.0",
"@types/node": "^18.11.3",
"antd": "^4.19.5",
"axios": "^0.21.1",
"eslint-plugin-react": "^7.29.4",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@babel/core": "^7.17.8",
"@babel/node": "^7.20.0",
"@babel/plugin-proposal-class-properties": "7.16.7",
"@babel/plugin-proposal-decorators": "7.17.8",
"@babel/preset-env": "7.16.11",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.21.0",
"@eslint/js": "^8.56.0",
"@ffprobe-installer/ffprobe": "^1.4.1",
"@types/node": "^18.15.3",
"@types/node-netstat": "^1.8.4",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@types/video.js": "^7.3.56",
"@typescript-eslint/eslint-plugin": "^6.19.0",
"@typescript-eslint/parser": "^6.19.0",
"babel-loader": "8.2.4",
"babel-plugin-named-asset-import": "^0.3.8",
"babel-preset-react-app": "^10.0.1",
"body-parser": "^1.20.0",
"cache-loader": "^4.1.0",
"cheerio": "^1.0.0-rc.10",
"classnames": "^2.5.1",
"cross-env": "7.0.3",
"css-loader": "~6.5.1",
"css-minimizer-webpack-plugin": "^5.0.1",
"dependency-cruiser": "^12.10.1",
"eslint": "^8.56.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-import": "^2.29.1",
"eslint-webpack-plugin": "^3.1.1",
"file-loader": "6.2.0",
"get-video-duration": "^4.0.0",
"html-webpack-plugin": "^5.5.0",
"json-loader": "^0.5.7",
"less": "^4.1.1",
"less-loader": "^10.0.1",
"less-plugin-aliases": "^1.0.3",
"log4js": "^6.4.6",
"mini-css-extract-plugin": "^2.7.7",
"node-ffprobe": "^3.0.0",
"react-highlight-words": "^0.18.0",
"react-refresh": "^0.14.0",
"react-window": "^1.8.7",
"request": "^2.88.2",
"speed-measure-webpack-plugin": "^1.5.0",
"style-loader": "3.3.1",
"tesseract.js": "^5.0.3",
"ts-loader": "^9.4.2",
"tsconfig-paths": "^4.1.2",
"tslint": "^6.1.3",
"typescript": "^4.9.5",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^4.1.1",
"webpack": "^5.64.4",
"webpack-bundle-analyzer": "^4.10.1",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.15.1",
"webpack-merge": "^5.8.0"
}
}
.babelrc
{
"presets": [
["@babel/preset-env", { "modules": false }],
"@babel/preset-react",
"@babel/preset-typescript"
],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
]
}
tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@src/*": [
"./src/*"
],
"@common/*": [
"../basicPublic/*"
],
"@base/*": [
"./*"
],
},
"target": "es2015",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": false,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"experimentalDecorators": true
},
"include": ["src","typings.d.ts","../basicPublic/**/*",],
"exclude": [
"node_modules"
]
}
当我使用这种形式“import styles2 from './index.less'”，并修改className时，程序是正确的。但是使用“import './app.less'”并不能引入less的内容
webpack打包文件app中没有与less相关的内容。捆。 js。下面是该类的位置，位于app中。捆。 js
_createClass(_default, [{
key: "render",
value: function render() {
console.log('app 渲染');
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "appColor"
}, "\u6211\u662F\u9996\u9875\uFF0C\u5F00\u5FC3\u7684\u9996\u98751", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
className: "appColor1"
}, "fjklajgekla;gj\u4E5D\u5206\u88E4\u5783\u573E\u5C4B\u674E\u51EF\u6B4C\u4E5D\u963F\u54E5\u8003\u62C9\u7F51\uFF1B "), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
className: "appColor5"
}, "fjklajgekla;gj\u4E5D\u5206\u88E4\u5783\u573E\u5C4B\u674E\u51EF\u6B4C\u4E5D\u963F\u54E5\u8003\u62C9\u7F51\uFF1B "), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(antd__WEBPACK_IMPORTED_MODULE_2__["default"], {
content: this.setButton(),
title: "Title"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(antd__WEBPACK_IMPORTED_MODULE_3__["default"], {
type: "primary",
className: "setBtn"
}, "\u8BBE\u7F6E")));
}
}]);
我觉得是版本问题，那就用吧
pnpm 添加@ant design/icons @types/jest @types/node antd axis React dom
和
pnpm add -D @babel/core @babel/node @babel/plugin 提案类属性 @babel/plugin 提案设计者 @babel/pre-set env @babel/pre-set read @babel/pre-set typescript @eslint/ js @ types/node @ types/node netstat @ types/react @ types/react ct dom @ types/video.js @ typescript elint/elint plugin @ typescrip T-eslint/partner babel loader babel 插件名称 asset import babel 预设读取应用程序缓存加载器类名跨环境CSS加载器依赖巡航eslint eslint配置airbnb基础eslint导入解析别名eslint插件导入eslint webpack插件文件加载器获取视频持续时间html-webpack插件json加载器less less less less less less插件别名迷你CSS提取插件节点fprobe反应大 Hlight 单词 反应刷新 反应窗口样式加载器 ts 加载器 tsconfig 路径 tslint typescript URL 加载器 webpack webpack 捆绑分析器 webpack cli webpack 开发服务器 webpack 合并
自动判断版本，但还是不行
只需阅读一点 npm 文档即可：
https://www.npmjs.com/package/less-loader
我注意到您没有匹配
lesstest: /\.less$/ // your config
test: /\.less$/i // npm example
您也可以为其添加调试
options: {
lessLogAsWarnOrErr: true,
},
删除“缓存加载器”只是为了测试和匹配示例代码也可能是一个很好的修复方法。