-
Notifications
You must be signed in to change notification settings - Fork 24
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
Doesn't work with NextJS 13 #28
Comments
You can switch to this repo. Is working for me for /app dir :) |
I kinda struggle on setting up the plugin with typescript: Does anyone happen to have a working nextjs 13 (with app dir), typescript project on GitHub where I can take a look? |
Unfortunately this one doesn't work with SWC, so again not really working for me with Next 13... |
I don't know which commit fixed the issue but |
Although it is configured to use Is there any recommended way to deal with it? |
Do you find the solution for nextjs 13 with app fold and SWC? |
Not working with app folder |
I had trouble getting this plugin to work with the app folder as well, and ended up extending the webpack config in
|
I edited the code to this and now it works for me. The code: /**
* @function withLess
* @param {import('next').NextConfig} nextConfig
* @returns {import('next').NextConfig}
* */
function withLess(nextConfig) {
return Object.assign({}, nextConfig, {
/**
* @function webpack
* @type {import('next').NextConfig["webpack"]}
* @param {import('webpack').Configuration} config
* @returns {import('webpack').Configuration}
* */
webpack(config, opts) {
// there are 2 relevant sass rules in next.js - css modules and global css
let sassModuleRules = [];
// global sass rule (does not exist in server builds)
let sassGlobalRules = [];
const cssRule = config.module.rules.find(({ oneOf }) => !!oneOf).oneOf
const addLessToRuleTest = (test) => {
if (Array.isArray(test)) {
return test.map((rx) => addLessToRegExp(rx));
} else {
return addLessToRegExp(test);
}
};
cssRule.forEach((rule, i) => {
if (rule.use?.loader === 'error-loader') {
rule.test = addLessToRuleTest(rule.test);
} else if (rule.use?.loader?.includes('file-loader')) {
rule.issuer = addLessToRuleTest(rule.issuer);
} else if (rule.use?.includes?.('ignore-loader')) {
rule.test = addLessToRuleTest(rule.test);
} else if (rule.test?.source === '\\.module\\.(scss|sass)$') {
sassModuleRules.push(rule);
} else if (rule.test?.source === '(?<!\\.module)\\.(scss|sass)$') {
sassGlobalRules.push(rule);
} else if (rule.issuer?.source === "\\.(css|scss|sass)$" && rule.type === 'asset/resource') {
rule.issuer = addLessToRuleTest(rule.issuer);
} else if (rule.use?.loader?.includes('next-flight-css-loader')) {
rule.test = addLessToRuleTest(rule.test);
}
});
const lessLoader = {
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true,
},
},
};
let lessModuleRules = cloneDeep(sassModuleRules);
const configureLessRule = (rule) => {
rule.test = new RegExp(rule.test.source.replace('(scss|sass)', 'less'));
// replace sass-loader (last entry) with less-loader
rule.use.splice(-1, 1, lessLoader);
};
lessModuleRules.forEach((lessModuleRule, index) => {
configureLessRule(lessModuleRule);
cssRule.splice(cssRule.indexOf(sassModuleRules[index]) + 1, 0, lessModuleRule);
});
if (sassGlobalRules) {
let lessGlobalRules = cloneDeep(sassGlobalRules);
lessGlobalRules.forEach((lessGlobalRule, index) => {
configureLessRule(lessGlobalRule);
cssRule.splice(cssRule.indexOf(sassGlobalRules[index]) + 1, 0, lessGlobalRule);
});
}
if (typeof nextConfig.webpack === 'function') {
return nextConfig.webpack(config, opts);
}
return config;
},
});
} |
Versions
next-with-less: 2.0.5
less-loader: 11.1.0
less: 4.1.3 (dev dependency)
next: 13.0.0
antd: 4.23.6
next.config.js
Error Message
I'm importing the antd.less in my
app/layout.tsx
fileThe text was updated successfully, but these errors were encountered: