-
Hi @annacoding2020,
I followed this guide to setup my Next.js project with support Ant Design. But when I used this configuration I can't use CSS Modules feature of Next.jsNext.js supports CSS Modules using the [name].module.css file naming convention. CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same CSS class name in different files without worrying about collisions.
Here is my test project:
https://github.com/thobn24h/nextjs-with-ant
When I run my project I got error:
./components/Header.module.css 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > .appc { | color: #fff; | background: #16191e;
Please review & help me correct this problem.
Thank you ! -
@thobn I had a similar problem. After looking through multiple Github issues, I finally was able to make it run with both less and css modules. The newer versions of next have inbuilt css modules and conflict with
@zeit/next-css
. I don't remember the exact steps, but here's the configuration that works now:const withLess = require('@zeit/next-less') const lessToJS = require('less-vars-to-js') const withPlugins = require('next-compose-plugins') const fs = require('fs') const path = require('path') const dotenv = require('dotenv') dotenv.config() // Where your antd-custom.less file lives const themeVariables = lessToJS( fs.readFileSync(path.resolve(__dirname, './assets/antd-custom.less'), 'utf8') ) const plugins = [ [withLess({ lessLoaderOptions: { javascriptEnabled: true, modifyVars: themeVariables, // make your antd custom effective }, webpack: (config, { isServer }) => { if (isServer) { const antStyles = /antd\/.*?\/style.*?/ const origExternals = [...config.externals] config.externals = [ (context, request, callback) => { if (request.match(antStyles)) return callback() if (typeof origExternals[0] === 'function') { origExternals[0](context, request, callback) } else { callback() } }, ...(typeof origExternals[0] === 'function' ? [] : origExternals), ] config.module.rules.unshift({ test: antStyles, use: 'null-loader', }) } const builtInLoader = config.module.rules.find((rule) => { if (rule.oneOf) { return ( rule.oneOf.find((deepRule) => { return deepRule.test && deepRule.test.toString().includes('/a^/'); }) !== undefined ); } return false; }); if (typeof builtInLoader !== 'undefined') { config.module.rules.push({ oneOf: [ ...builtInLoader.oneOf.filter((rule) => { return (rule.test && rule.test.toString().includes('/a^/')) !== true; }), ], }); } config.resolve.alias['@'] = path.resolve(__dirname); return config; } })] ] const nextConfig = { env: { } } module.exports = withPlugins(plugins, nextConfig)
Edited by Sumit Sarkar -
@sumitsarkar01, Thank you very much!
**It work correctly.**
You're so great! -
@sumitsarkar01 Thanks for the script, you nail it!
-
I am receiving the following error when I try to build for Production, anybody can help me? More than 5 days without solution here
Error: No module factory available for dependency type: CssDependency
Build error occurred Error: > Build failed because of webpack errors `
Edited by Bruno Rana -
💬 @coolbeatz71@brunograna +1
Please register or sign in to comment