我想使用Next.js与Sass和CSS模块,但也想使用Ant Design,并希望使用较少的风格较小的建筑大小。我可以启用CSS模块或Less加载器,但不能同时启用两者。Next.js中的示例没有帮助我解决这个问题。
jpfvwuh41#
经过几个小时的研究,我终于找到了正确的解决方案,并希望分享它:.babelrc(此处无魔法)
.babelrc
{ "presets": ["next/babel"], "plugins": [ [ "import", { "libraryName": "antd", "style": true } ] ] }
next.config.js:
next.config.js
/* eslint-disable */ const withLess = require('@zeit/next-less'); const withSass = require('@zeit/next-sass'); const lessToJS = require('less-vars-to-js'); const fs = require('fs'); const path = require('path'); // Where your antd-custom.less file lives const themeVariables = lessToJS( fs.readFileSync(path.resolve(__dirname, './assets/antd-custom.less'), 'utf8') ); module.exports = withSass({ cssModules: true, ...withLess({ lessLoaderOptions: { javascriptEnabled: true, modifyVars: themeVariables, // make your antd custom effective importLoaders: 0 }, cssLoaderOptions: { importLoaders: 3, localIdentName: '[local]___[hash:base64:5]' }, webpack: (config, { isServer }) => { //Make Ant styles work with less 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' }); } return config; } }) });
如何编写withSasswithLess使用以及将cssModules: true放入外部对象的最后一个提示来自这里的注解。虽然我已经尝试了从前面的例子中得出的不同组合:next+ant+lessnext+sass为了完成这里的依赖关系在我的package.json:
withSass
withLess
cssModules: true
package.json
... "dependencies": { "@zeit/next-less": "^1.0.1", "@zeit/next-sass": "^1.0.1", "antd": "^4.1.3", "babel-plugin-import": "^1.13.0", "less": "^3.11.1", "less-vars-to-js": "^1.3.0", "next": "^9.3.4", "node-sass": "^4.13.1", "null-loader": "^3.0.0", "react": "^16.13.1", "react-dom": "^16.13.1", "sass": "^1.26.3" } ...
我希望这能帮助其他人更快地找到这个解决方案
1zmg4dgp2#
@zeit/next-less已过时,并禁用Next的内置CSS支持。它还使用了非常旧的less和less-loader版本。我创建了一个包,通过复制SASS规则并将其设置为Less文件和less-loader,向Next.js注入Less支持。https://github.com/elado/next-with-lesshttps://www.npmjs.com/package/next-with-less
@zeit/next-less
less
less-loader
ruarlubt3#
虽然上面的答案可能适用于低于11的NextJS版本,但它们不适用于11+。我发现以下插件非常成功...https://github.com/SolidZORO/next-plugin-antd-less
4jb9z9bj4#
我使用的是elado的包-https://github.com/elado/next-with-less你将需要less和less-loader作为dependency. after that创建一个global.less文件在styles文件夹. so it 's like,root〉style > global.less and paste this code
global.less
styles
style > global.less
@import '~antd/lib/style/themes/default.less'; @import '~antd/dist/antd.less'; @primary-color: #ff9b18; @border-radius-base: 20px;
并将下面的代码添加到您的next.config.js文件中,该文件将在根文件夹中创建。
// next.config.js const withLess = require("next-with-less"); module.exports = withLess({ lessLoaderOptions: { /* ... */ }, });
ldioqlga5#
在我们的项目中,有旧的scss和css文件。它们没有使用CSS模块的Next js指导方针。所以我不得不覆盖webpack.config.js。所以这工作得很好。但是当我们把文件移到monorepo共享包中时,babel没有把它们翻译出来。我使用了下面的东西,但是这些东西对没有. module扩展名的SCSS模块不起作用。
{ externalDir: true, }
最后符号链接黑客工作的外部共享文件
module.exports = { //... resolve: { symlinks: false, }, };
mrfwxfqh6#
对于那些仍然有问题的人来说,除了我们可爱的mini-css-extract-plugin之外,你不需要任何额外的软件包。PS:我还在我的Webpack配置中添加了Sass。你可以在你的项目中使用less和Sass/SCSS文件。next.config.js:
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { webpack(config) { config.module.rules.push( { // this part is for sass test: /\.module\.(scss|sass)$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader' }, { loader: 'sass-loader' }, ], }, { // this part is for less test: /\.less$/i, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', }, { loader: 'less-loader', options: { sourceMap: true, lessOptions: { javascriptEnabled: true, }, }, }, ], } ); config.plugins.push( new MiniCssExtractPlugin({ filename: 'static/css/[name].css', chunkFilename: 'static/css/[contenthash].css', }) ); return config; }, };
package.json:
"dependencies": { "@next/font": "13.1.1", "css-loader": "^6.7.3", "less": "^4.1.3", "less-loader": "^11.1.0", "mini-css-extract-plugin": "^2.7.2", "next": "13.1.1", "next-transpile-modules": "^10.0.0", "react": "18.2.0", "react-dom": "18.2.0", "sass": "^1.57.1", "sass-loader": "^13.2.0", }
6条答案
按热度按时间jpfvwuh41#
经过几个小时的研究,我终于找到了正确的解决方案,并希望分享它:
.babelrc
(此处无魔法)next.config.js
:如何编写
withSass
withLess
使用以及将cssModules: true
放入外部对象的最后一个提示来自这里的注解。虽然我已经尝试了从前面的例子中得出的不同组合:next+ant+lessnext+sass
为了完成这里的依赖关系在我的
package.json
:我希望这能帮助其他人更快地找到这个解决方案
1zmg4dgp2#
@zeit/next-less
已过时,并禁用Next的内置CSS支持。它还使用了非常旧的less
和less-loader
版本。我创建了一个包,通过复制SASS规则并将其设置为Less文件和
less-loader
,向Next.js注入Less支持。https://github.com/elado/next-with-less
https://www.npmjs.com/package/next-with-less
ruarlubt3#
虽然上面的答案可能适用于低于11的NextJS版本,但它们不适用于11+。我发现以下插件非常成功...
https://github.com/SolidZORO/next-plugin-antd-less
4jb9z9bj4#
我使用的是elado的包-https://github.com/elado/next-with-less
你将需要
less
和less-loader
作为dependency. after that创建一个global.less
文件在styles
文件夹. so it 's like,root〉style > global.less
and paste this code并将下面的代码添加到您的
next.config.js
文件中,该文件将在根文件夹中创建。ldioqlga5#
在我们的项目中,有旧的scss和css文件。它们没有使用CSS模块的Next js指导方针。所以我不得不覆盖webpack.config.js。所以这工作得很好。但是当我们把文件移到monorepo共享包中时,babel没有把它们翻译出来。我使用了下面的东西,但是这些东西对没有. module扩展名的SCSS模块不起作用。
{ externalDir: true, }
在下一个Js配置中,根目录为babel.cofig.json最后符号链接黑客工作的外部共享文件
mrfwxfqh6#
对于那些仍然有问题的人来说,除了我们可爱的mini-css-extract-plugin之外,你不需要任何额外的软件包。
PS:我还在我的Webpack配置中添加了Sass。你可以在你的项目中使用less和Sass/SCSS文件。
next.config.js
:package.json
: