-
Notifications
You must be signed in to change notification settings - Fork 48
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
I want to use less and less module at the same time. How can I configure it #45
Comments
me too! |
But how can i use less module? |
I read the source code, it seems that this function has not been added, I hope the author can add this function. |
This would be great if it would get patched |
Hello, it would be great if someone could please help by submitting a PR that adds this functionality. Thank you! |
For now I've managed to interpret .module.less into css modules as such
But in this way I lose the ability to have global .less files. It's not that big of a deal, but if anyone has an idea, it would be great. |
I deal with this by configuring two plugins. const lessLoaderOptions = {
lessOptions: {
modifyVars: { '@primary-color': '#ff6a00', '@link-color': '#ff6a00' },
javascriptEnabled: true,
},
};
module.exports = {
plugins: [
{
plugin: CracoAntDesignPlugin,
options: {
lessLoaderOptions,
},
},
{
plugin: CracoLessPlugin,
options: {
cssLoaderOptions: {
modules: { localIdentName: '[local]_[hash:base64:5]' },
},
lessLoaderOptions,
modifyLessRule(lessRule, context) {
lessRule.test = /\.module\.less$/;
// lessRule.exclude = /node_modules/;
delete lessRule.exclude;
return lessRule;
},
},
},
],
} |
@taoxhsmile thanks a lot. I found the answer yesterday, and I thought that I updated the comment here. But it's good that you posted your code. I just added the same plugin again at the beginning. I didn't see the need to use This could have been solved much easier i think if craco would use a newer version of Here is my final craco.config.js: const CracoLessPlugin = require("craco-less");
// this is a variable that's going to be available in both .less and .module.less files
const modifiedTheme = {
"@primary-color": "#1DA57A",
};
module.exports = {
plugins: [
// This plugin takes care of the .less files
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
javascriptEnabled: true,
modifyVars: modifiedTheme,
},
},
},
},
// This plugin take scare of the .less.module files
{
plugin: CracoLessPlugin,
options: {
modifyLessRule: function (lessRule, _context) {
lessRule.test = /\.(less)$/;
lessRule.use = [
{
loader: "style-loader",
},
{
loader: "css-loader",
options: {
modules: true,
},
},
{
loader: "less-loader",
options: {
lessOptions: {
modifyVars: modifiedTheme,
javascriptEnabled: true,
},
},
},
];
lessRule.exclude = /node_modules/;
return lessRule;
},
},
},
],
}; |
@ndbroadbent I have created a pull request to add this feature. Now, we can use less and less module at the same time without any additional configuration. |
I want to use less and less module at the same time. How can I configure it
The text was updated successfully, but these errors were encountered: