英文:
Why is a React component not applying the style from a module less file?
问题
我使用CRA生成了一个新项目，然后使用less包添加了对less的支持。我有一个React Footer组件的设置如下，但类没有被应用。我使用Chrome的开发工具验证了类docs-footer没有被设置，实际上，footer元素根本没有设置任何类：
Footer.module.less 文件：
@import '~@comp/colors/dist/colors';
.docs-footer {
padding-top: 10px;
text-align: center;
...更多内容
}
Footer.jsx 文件：
import React from 'react';
import styles from './Footer.module.less';
const Footer = () => {
return (
<footer className={styles.docsFooter}>
...
</footer>
);
};
export default Footer;
webpack.config.js：
module.exports = {
rules: [{
test: /\.less$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader', // 将 CSS 转换为 CommonJS
}, {
loader: 'less-loader', // 编译 Less 为 CSS
}],
}],
}
然后还使用react-script-less在CRA的基础上，我的package.js的这一部分：
"scripts": {
"start": "react-scripts-less start",
"build": "react-scripts-less build",
"test": "react-scripts-less test"
}
可能引起这个问题的原因是什么？请注意，我也尝试过没有使用.module约定，只使用Footer.less作为文件名，但仍然不起作用。
英文:
I used CRA to generate a new project and then added support for less using the less package. I have a react Footer component setup as follows but the class is not being applied. I use dev tools from Chrome to verify that the class docs-footer is not set, in fact, the footer element doesn't have any class set at all:
Footer.module.less file:
@import '~@comp/colors/dist/colors'
.docs-footer {
padding-top: 10px;
text-align: center;
... more stuff
}
Footer.jsx file:
import React from 'react';
import styles from './Footer.module.less'
const Footer = () => {
return (
<footer className={styles.docsFooter}>
...
</footer>
);
};
export default Footer;
webpack.config.js:
module.exports = {
rules: [{
test: /\.less$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader', // translates CSS into CommonJS
}, {
loader: 'less-loader', // compiles Less to CSS
}],
}],
}
then also using react-script-less on top of CRA with this part of my package.js:
"scripts": {
"start": "react-scripts-less start",
"build": "react-scripts-less build",
"test": "react-scripts-less test"
}
What can be causing this issue? Note I have also tried without having the .module convention with just Footer.less as file name and doesn’t work either.
答案1
得分: 1
将测试正则表达式/\.less$/更改为/\.less$/i
https://webpack.js.org/loaders/less-loader/
module.exports = {
rules: [{
test: /\.less$/i,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader', // translates CSS into CommonJS
}, {
loader: 'less-loader', // compiles Less to CSS
}],
}],
}
英文:
Change test RegExp /\.less$/ to /\.less$/i
https://webpack.js.org/loaders/less-loader/
module.exports = {
rules: [{
test: /\.less$/i,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader', // translates CSS into CommonJS
}, {
loader: 'less-loader', // compiles Less to CSS
}],
}],
}
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论