not loading other .less files in next build

[ghost]

Hi I jumped into the issue that it works fine on the dev mode but when I do next build and try next start. I found that the less styles from antd works fine but all other .less files imported in JSX are not working.

Here's my next.config.js file.

const withAntdLess = require('next-plugin-antd-less')

module.exports = withAntdLess({
  // optional
  modifyVars: {
    '@primary-color': '#04f',
    '@font-family': 'Montserrat',
  },
  // optional
  lessVarsFilePath: './src/styles/variable.less',
  // optional https://github.com/webpack-contrib/css-loader#object
  cssLoaderOptions: {},
  i18n: {
    locales: [
      'en',
      'es',
      'zh-Hans',
      'zh-Hant',
      'ja',
      'ko',
      'vi',
      'th',
    ],
    defaultLocale: 'en',
  },
  webpack(config) {
    return config
  },
  serverRuntimeConfig: {
    // Will only be available on the server side
  },
  publicRuntimeConfig: {
    // Will be available on both server and client
    API_URL: process.env.API_URL,
    APP_URL: process.env.APP_URL,
  },
})

[kseanjbz]

Having a similar issue where my imported styles in my _app is being loaded before the antd and thus not applying styling and getting overwritten by antd.

[ghost]

@kseanjbz I've fixed with the following setup for temp instead of using next-plugin-antd-less.

"@zeit/next-less": "^1.0.1", "@zeit/next-sass": "^1.0.1" "less": "^3.11.1", "less-vars-to-js": "^1.3.0"

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, './src/styles/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 }) => {
      const webpackConfig = config
      // Make Ant styles work with less
      if (isServer) {
        const antStyles = /antd\/.*?\/style.*?/
        const origExternals = [...config.externals]
        webpackConfig.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),
        ]

        webpackConfig.module.rules.unshift({
          test: antStyles,
          use: 'null-loader',
        })
      }
      return webpackConfig
    },
    i18n: {
      locales: [
        'en',
        'es',
      ],
      defaultLocale: 'en',
    },
    serverRuntimeConfig: {
      // Will only be available on the server side
    },
    publicRuntimeConfig: {
      // Will be available on both server and client
      API_URL: process.env.API_URL,
      APP_URL: process.env.APP_URL,
    },
  }),
})