Как настроить Next Js с модулями Antd + Less и Sass + Css - PullRequest
Новая
       63

Как настроить Next Js с модулями Antd + Less и Sass + Css

1 голос
/ 16 апреля 2020

Я хочу использовать Next. js с модулями Sass и CSS, но также хочу использовать Ant Design и хотел использовать стили Less для меньшего размера здания.

Я могу включить либо css модулей, либо менее загружать, но не оба одновременно. Примеры из следующего. js не помогли мне решить эту проблему.

1 Ответ

2 голосов
/ 16 апреля 2020

После нескольких часов исследований я наконец нашел правильное решение и хотел поделиться им:

.babelrc (здесь нет волхвов c) 

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

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;
    }
  })
});

Последний совет о том, как записать использование withSass withLess и как поместить cssModules: true во внешний объект, пришел из этого комментария здесь .

В то время как я уже пробовал различные комбинации, полученные из предыдущих примеров: следующий + муравей + меньше следующий + sass

Для завершения здесь зависимости в моем 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"
  }
...

Надеюсь, это поможет другим людям быстрее найти это решение. :)

...