Comments (9)
@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 CracoAntDesignPlugin
as you can already use modifyVars in CracoLessPlugin
This could have been solved much easier i think if craco would use a newer version of react-scripts
and css-loader
. Because css-loader has an option to automatically detect if the file is simple or module and treat it accordingly. It's only available from css-loader 3.5, and this project only uses 3.4. But hey, we can't complain, it's free.
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;
},
},
},
],
};
from craco-less.
But how can i use less module?
Help!
from craco-less.
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;
},
},
},
],
}
from craco-less.
Hello, it would be great if someone could please help by submitting a PR that adds this functionality. Thank you!
@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.
from craco-less.
me too!
from craco-less.
I read the source code, it seems that this function has not been added, I hope the author can add this function.
from craco-less.
This would be great if it would get patched
from craco-less.
Hello, it would be great if someone could please help by submitting a PR that adds this functionality. Thank you!
from craco-less.
For now I've managed to interpret .module.less into css modules as such
module.exports = {
plugins: [
{
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: { "@primary-color": "#1DA57A" },
javascriptEnabled: true,
},
},
},
];
lessRule.exclude = /node_modules/;
return lessRule;
},
},
},
],
};
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.
from craco-less.
Related Issues (20)
- Modify Less module rule for all files in a directory HOT 2
- craco 7 with official react-scripts v5 support has been released HOT 4
- Migrate from craco-less-plugin HOT 2
- [3.x]The engine "yarn" is incompatible with this module. Expected version ">= 3.6". Got "1.22.19" HOT 6
- When installing `craco-less`, is it more appropriate to install it as a development dependency? HOT 2
- Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema HOT 2
- Browser console less positioning is inaccurate
- module.less not work HOT 6
- when i use craco-less and craco-sass-resources-loader together, it reported wrong HOT 4
- Getting error that craco-less needs to be updated HOT 7
- Can't install with craco@6 HOT 5
- Does it not work with custom value for NODE_ENV?
- Error evaluating function `unit`: the first argument to unit must be a number HOT 2
- Omit error option HOT 1
- Is it possible to realize automatic recognition of css modules
- Can't find 'file-loader' issue with react-scripts 5.0.0 HOT 9
- craco-less 2.0.0 requires react-scripts 5 but that's incompatible with craco 6.4.3 HOT 7
- MiniCssExtractPlugin config not work
- Can't use craco-less with craco v7.0.0-alpha.3 HOT 5
- Find loaders path-separator agnostically HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from craco-less.