Не можете использовать CSS модули в Next js, Ant Design? - PullRequest
Новая
       71

Не можете использовать CSS модули в Next js, Ant Design?

0 голосов
/ 18 февраля 2020

Я делаю следующий JS проект с использованием Ant design, Less. Но я не могу использовать CSS модули с Меньше, даже когда я добавляю

cssModules: true,

Вот мой next.config. js

const withPlugins = require("next-compose-plugins");
const withLess = require('@zeit/next-less')
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 = withLess({
    cssModules: true,
    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',
            })
        }
        return config
    },
})

index. js: 

 import styles from 'path-to-less.less'


<p className={styles.styleTab1} >Conntents </p>

, но это не влияет на мой компонент.

...