search

SolidZORO / next-plugin-antd-less

🎩 Use Antd (Less) with Next.js v12, Zero Dependency on other Next-Plugins.
MIT License
345 stars 48 forks source link

compile failed with next.js 11 #66

Closed ZhangWei-KUMO closed 3 years ago

ZhangWei-KUMO commented 3 years ago

I add this plugin into my next.js project, but compiling is failed.

.bezierEasingMixin(); ^ Inline JavaScript is not enabled. Is it set in your options? I don't know why this plugin do not support Inline JavaScript

SolidZORO commented 3 years ago

https://github.com/SolidZORO/next-plugin-antd-less/issues/26#issuecomment-786653155

ZhangWei-KUMO commented 3 years ago

#26 (comment)

跑是跑起来了，但是@primary-color设置没有反应。

SolidZORO commented 3 years ago

@ZhangWei-KUMO show me the code?

ZhangWei-KUMO commented 3 years ago

@ZhangWei-KUMO show me the code?

import Head from 'next/head'
import { Pagination,Button } from 'antd';

export default function Home() {
  return (
    <div>
      <Head>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
          <Button type="primary">        测试  </Button>
     {/* <Pagination/> */}
      </main>  
    </div>
  )
}
  "dependencies": {
    "antd": "^4.16.5",
    "bootstrap": "4.6.0",
    "next": "11.0.1",
    "react": "17.0.2",
    "react-bootstrap": "^1.6.1",
    "react-dom": "17.0.2",
    "react-tabs": "^3.2.2"
  },
  "devDependencies": {
    "babel-plugin-import": "^1.13.3",
    "eslint": "7.29.0",
    "eslint-config-next": "11.0.1",
    "eslint-plugin-react": "^7.24.0",
    "next-plugin-antd-less": "^1.3.0",
    "@zeit/next-less": "^1.0.1",
    "null-loader": "2.0.0",
    "less": "3.0.4",
    "less-vars-to-js": "1.3.0"
  }
ZhangWei-KUMO commented 3 years ago

@ZhangWei-KUMO show me the code?

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

module.exports = withAntdLess({
  lessLoaderOptions: {
      javascriptEnabled: true,
  },
  reactStrictMode: true,
  modifyVars: { '@primary-color': '#000' },
  lessVarsFilePath: './less/antd-custom.less',
  lessVarsFilePathAppendToEndOfContent: false,
  images:{
      domains: ['dazclassbucket.oss-cn-beijing.aliyuncs.com',"www.dazmaster.com"]
    },
  webpack(config) {
    return config;
  },

});
ZhangWei-KUMO commented 3 years ago

Primary Color is still antd blue

SolidZORO commented 3 years ago

remove all less deps@zeit/next-less less less-vars-to-js, but next-plugin-antd-less.

ZhangWei-KUMO commented 3 years ago

remove all less deps@zeit/next-less less less-vars-to-js, but next-plugin-antd-less.

  "dependencies": {
    "antd": "^4.16.5",
    "bootstrap": "4.6.0",
    "next": "11.0.1",
    "react": "17.0.2",
    "react-bootstrap": "^1.6.1",
    "react-dom": "17.0.2",
    "react-tabs": "^3.2.2"
  },
  "devDependencies": {
    "babel-plugin-import": "^1.13.3",
    "eslint": "7.29.0",
    "eslint-config-next": "11.0.1",
    "eslint-plugin-react": "^7.24.0",
    "next-plugin-antd-less": "^1.3.0"
  }

涛声依旧

SolidZORO commented 3 years ago 
  modifyVars: { '@primary-color': '#000' },
  lessVarsFilePath: './less/antd-custom.less',

try { '@primary-color': '#000' } move to './less/antd-custom.less'.

ZhangWei-KUMO commented 3 years ago 
  modifyVars: { '@primary-color': '#000' },
  lessVarsFilePath: './less/antd-custom.less',

try { '@primary-color': '#0' } move to './less/antd-custom.less'.

It is still not work

cbfn commented 3 years ago

Hi! Any solution about this issue? In Dev looks ok but after build antd is not loaded.

SolidZORO commented 3 years ago

@cbfn pls check https://github.com/SolidZORO/mkn repo.

cbfn commented 3 years ago

Hi @SolidZORO! I tried without success, maybe I`m forgoting something. Here is my package.json:

...
  "dependencies": {
    "@next/bundle-analyzer": "^10.2.3",
    "@react-google-maps/api": "^2.1.1",
    "antd": "^4.16.6",
    "autoprefixer": "^10.2.6",
    "css-loader": "^5.2.6",
    "next": "^11.0.1",
    "next-plugin-antd-less": "^1.3.0",
    "cross-env": "^7.0.3",
    "dayjs": "^1.10.5",
    "http-proxy-middleware": "^1.0.6",
    "mobx": "^6.1.6",
    "mobx-react": "^7.1.0",
    "postcss-import": "^14.0.2",
    "react": "17.0.2",
    "react-cool-onclickoutside": "^1.6.0",
    "react-dom": "17.0.2",
    "react-facebook-pixel": "^1.0.4",
    "react-player": "^2.9.0",
    "use-places-autocomplete": "^1.8.2",
    "validator": "^13.5.2"
  },
  "devDependencies": {
    "@types/google.maps": "^3.44.2",
    "@types/gtag.js": "0.0.5",
    "@types/react": "^17.0.3",
    "@types/validator": "^13.1.3",
    "babel-plugin-import": "^1.13.3",
    "babel-plugin-module-resolver": "^4.1.0",
    "babel-plugin-react-css-modules": "^5.2.6",
    "antd-dayjs-webpack-plugin": "^1.0.6",
    "next-compose-plugins": "^2.2.1",
    "node-http-proxy": "^0.2.4",
    "postcss": "^8.3.5",
    "tailwindcss": "^2.2.4",
    "typescript": "^4.3.5"
  }
}
...

// next.config

/* eslint-disable */
const withAntdLess = require('next-plugin-antd-less');

module.exports = withAntdLess({
  // modifyVars: {
  //   '@THEME--DARK': 'theme-dark',
  // },
  lessVarsFilePath: './src/styles/variables.less',
  // cssLoaderOptions: {
  //   esModule: false,
  //   sourceMap: false,
  //   modules: {
  //     mode: 'local',
  //   },
  // },

  // Other NextConfig Here...
  webpack(config) {
    return config;
  },

  // NextFuture
  // future: {
  //   webpack5: true,
  // },
});

// babel.config

module.exports = function () {
  return {
    presets: [['next/babel']],
    plugins: [['import', { libraryName: 'antd', style: true }]],
  };
};

// tailwind.css

@import './landing.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-size: 14px;
  background-color: white !important;
  font-family: 'Roboto', sans-serif !important;
}

svg {
  vertical-align: initial !important;
}

input[type='date'] {
  min-height: 2.5rem;
}

.ant-layout {
  background-color: inherit !important;
}

.ant-btn {
  line-height: inherit !important;
}
...

// _app.tsx

import '../styles/tailwind.css';
import { useEffect } from 'react';
import { Layout } from 'antd';
import { observer } from 'mobx-react';
import { AppProps } from 'next/dist/next-server/lib/router/router';
import Router, { useRouter } from 'next/router';
import NextHead from 'next/head';
import NavBar from '@components/NavBar';
import { isServer } from '@utils/isServer';
import { getStores, StoreProvider } from '@stores/index';
import { setLastPageVisited } from '@helpers/history';
import * as gtag from '@utils/gtag';
import dynamic from 'next/dynamic';

require('@/styles/global.less');

// global.less

@import '/styles/variables.less';
@import '/styles/variables-css.less';

// tailwind.config.js

module.exports = {
  purge: {
    mode: 'all',
    preserveHtmlElements: false,
    content: [
      './pages/**/*.{js,ts,jsx,tsx}',
      './components/**/*.{js,ts,jsx,tsx}',
    ],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    ...
cbfn commented 3 years ago

Update:

I removed the mode and preserveHtmlElements from my tailwind.config and it works well. Don't know if is the best approach. Thanks!


module.exports = {
  purge: {
    mode: 'all',
    preserveHtmlElements: false,
    content: [
      './pages/**/*.{js,ts,jsx,tsx}',
      './components/**/*.{js,ts,jsx,tsx}',
    ]
SolidZORO commented 3 years ago

@cbfn Thanks for sharing the solution, I have not used tailwind and this solution of yours is just fine.