ye-will / next-plugin-antd Goto Github PK

View Code? Open in Web Editor NEW

28.0 28.0 3.0 15 KB

A @zeit/next-less patch with full support for Ant Design, Less and CSS modules

License: MIT License

JavaScript 100.00%

ant-design css-modules less next-plugin nextjs

next-plugin-antd's People

Contributors

Stargazers

Watchers

Forkers

jameskaguo777 neyio dominicleo

next-plugin-antd's Issues

Support for global styles?

Hi,

Have you found a way to support global styles?

Out-of-the-box next.js supports them for CSS & SASS:
https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet

But every-way I have tried with LESS, the global styles I add to _app.js are scoped with cssModules. The only work-around I could find was to use attribute selectors to avoid cssModules from scoping them.

Is there anyway to only enable cssModules only for files ending in module.less?
This is how next.js handles it.

Important: To use CSS Modules, the CSS file name must end with .module.css.
https://nextjs.org/learn/basics/assets-metadata-css/layout-component

UPDATE

On reading the webPack cssLoader doc I believed the following two approaches should work...

module.exports = withPluginAntd({
  // loading custom ant design theme vars
  antdThemeVariables: themeVariables,
  // any options for @zeit/next-less
  cssModules: true,
  cssLoaderOptions: {
    // Automatically enable css modules for files satisfying `/\.module\.\w+$/i` RegExp.
    modules: { auto: true }
  }
});

module.exports = withPluginAntd({
  // loading custom ant design theme vars
  antdThemeVariables: themeVariables,
  // any options for @zeit/next-less
  cssModules: true,
  cssLoaderOptions: {
    modules: {
      mode: (resourcePath) => {
        if (/module.less$/i.test(resourcePath)) {
          return 'local';
        }

        return 'global';
      }
    }
  }
});

Also tried this variation...

module.exports = withPluginAntd({
  // loading custom ant design theme vars
  antdThemeVariables: themeVariables,
  // any options for @zeit/next-less
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: '[local]___[hash:base64:5]',
    mode: (resourcePath) => {
      if (/module.less$/i.test(resourcePath)) {
        return 'local';
      }

      return 'global';
    }
  }
});

They didn't work unfortunately, could it be a bug, I found in the debugger that the configuration was passed.

Thanks

add support and example for other ant-design related libraries.

ant-motion
- support
- example
ant-design-charts
- support
- example
ant-design-pro-layout
- support
- example

Other libs are welcome too.

0.2.0版本报错

antd 4.5.2

问题描述：

升级了antd的版本之后，也把插件升级到了0.2.0，但是报错了Inline JavaScript is not enabled. Is it set in your options?，还有lessLoaderOptions不匹配的问题。lessLoaderOptions这个改掉配置项就好了，但inline javascript的问题没能解决，就算手动开启了也无济于事。

可能的问题：

我去了antd官网搜配置项看了0.2.0版本的依赖和0.1.2版本依赖的区别，发现可能是less-loader的版本的问题！回退到0.1.2版本之后问题消失了。

我在antd的示例配置里面看到了如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项这句话，不知道是否是这个问题
https://ant.design/docs/react/customize-theme-cn

The custom styles are not updated when using route jumps by `next-plugin-antd`, the page must be refreshed to work properly

Issue with TypeScript

Thanks for the plugin :)

I get the following error when I run yarn build. It seems to be because I'm using TypeScript.

Any idea how to fix it? Thanks

Failed to compile.

/proj/components/Logo/index.tsx
/proj//components/Logo/index.tsx(1,20):
1:20 Cannot find module './logo.module.less' or its corresponding type declarations.
  > 1 | import styles from './logo.module.less';
      |                    ^
    2 | 
    3 | export default function Logo(): JSX.Element {
    4 |   return (


> Build error occurred
Error: > Build failed because of webpack errors

CSS与antd less共存的问题

我的next.config.js

const withPlugins = require("next-compose-plugins")
const withPluginAntd = require("next-plugin-antd")
const lessToJS = require("less-vars-to-js")
const fs = require("fs")
const path = require("path")
const withCss = require("@zeit/next-css")

const themeVariables = lessToJS(
    fs.readFileSync(path.resolve(__dirname, "./styles/antdCustom.less"), "utf8")
)

const nextConfig = {
    webpack(config, options) {
        config.module.rules.push({
            test: /\.md$/,
            use: "raw-loader",
        })
        return config
    },
}

module.exports = withPlugins([
    [
        withPluginAntd,
        {
            antdThemeVariables: themeVariables,
        },
    ],
    [
        withCss,
        {
            cssModules: true,
            cssLoaderOptions: {
                importLoaders: 1,
                localIdentName: "[local]___[hash:base64:5]",
            },
        },
    ],
    nextConfig,
])

当在_app.tsx引入antd/dist/antd.less报没有loader的问题不能解析@

当注释掉antd.less引入之后，cssModules又报了一个，被判断为了全局的样式？？？？

error - ./styles/components/common/NavBar.css
Global CSS cannot be imported from files other than your Custom

chunk styles [mini-css-extract-plugin] Conflicting order betwee

Hi,

I found I kept getting erros like the below...

warn  - chunk styles [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/@zeit/next-css/node_modules/css-loader??ref--6-2!./node_modules/less-loader/dist/cjs.js??ref--6-3!./node_modules/antd/lib/typography/style/index.less
 * css ./node_modules/@zeit/next-css/node_modules/css-loader??ref--6-2!./node_modules/less-loader/dist/cjs.js??ref--6-3!./node_modules/antd/lib/button/style/index.less

But changing .babelrc to

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

and importing LESS files in _app.tsx fixed it

import 'antd/dist/antd.less';
import '../styles/global.less';

import { AppProps } from 'next/app';
import React from 'react';

import AppWrapper from '../components/AppWrapper';
import { wrapper } from '../store';

const WrappedApp: React.FC<AppProps> = ({ Component, pageProps }: AppProps) => (
  <AppWrapper>
    <Component {...pageProps} />
  </AppWrapper>
);

export default wrapper.withRedux(WrappedApp);

I wonder, is this a better approach?

`TypeError: this[MODULE_TYPE] is not a function` when using `next-compose-plugins`

I am using next-compose-plugins to support other nextjs plugins. With the following configuration it doesn't work and throws TypeError: this[MODULE_TYPE] is not a function. next-compose-plugins failes to run other plugins(@zeit/next-sass in this case) when next-plugin-antd is used.

// ... all imports here
const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, "./assets/antd-custom.less"), "utf8")
);

const nextConfig = {
  webpack(config, { dev }) {
    if (dev) {
      config.devtool = "eval-cheap-module-source-map";
    }
    return config;
  },
};

module.exports = withPlugins(
  [
    [
      withPluginAntd,
      {
        antdThemeVariables: themeVariables,
      },
    ],
    [withSass],
    [withCSS],
  ],
  nextConfig
);

This was my old config which works. But, I'm trying to add this library to simplify my next.config.js and remove [mini-css-extract-plugin] Conflicting order warnings.

/* eslint-disable */
// imports here...
const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, "./assets/antd-custom.less"), "utf8")
);

const nextConfig = {
  webpack(config, { dev }) {
    if (dev) {
      config.devtool = "eval-cheap-module-source-map";
    }
    return config;
  },
};

module.exports = withPlugins(
  [
    [
      withLess,
      {
        lessLoaderOptions: {
          javascriptEnabled: true,
          modifyVars: themeVariables, // make your antd custom effective
        },
        webpack: (config, { isServer, dev }) => {
          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",
            });
          }

          if (dev) {
            config.devtool = "eval-cheap-source-map";
          }

          return config;
        },
      },
    ],
    [withSass],
    [withCSS],
  ],
  nextConfig
);

ye-will / next-plugin-antd Goto Github PK

next-plugin-antd's People

Contributors

Stargazers

Watchers

Forkers

next-plugin-antd's Issues

Support for global styles?

add support and example for other ant-design related libraries.

0.2.0版本报错

The custom styles are not updated when using route jumps by `next-plugin-antd`, the page must be refreshed to work properly

Issue with TypeScript

CSS与antd less共存的问题

chunk styles [mini-css-extract-plugin] Conflicting order betwee

`TypeError: this[MODULE_TYPE] is not a function` when using `next-compose-plugins`

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent