Can't resolve less-loader

Mar-he commented 3 years ago

Cloning mkn works just fine, but trying to implement it into an existing project always results in:

wait  - compiling...
error - ./src/pages/_app.tsx:9:0
Module not found: Can't resolve 'less-loader'
   7 | import PageLayout from './layout'
   8 |
>  9 | require('@styles/globals.less')
  10 |
  11 | const MyApp = ({ Component, pageProps }: AppProps) => {

I've updated all installed modules, to be exactly the same as in the mkn demo, sans eslint and everything, that I don't use, but I just won't work.

"dependencies": {
      "@ant-design/icons": "^4.4.0",
      "@azure/msal-browser": "^2.14.0",
      "@azure/msal-react": "1.0.0-beta.1",
      "@babel/core": "^7.12.9",
      "@babel/preset-env": "^7.12.7",
      "@babel/preset-react": "^7.12.13",
      "@babel/preset-typescript": "^7.12.7",
      "@microsoft/microsoft-graph-client": "^2.1.1",
      "antd": "^4.16.3",
      "autoprefixer": "^10.2.6",
      "axios": "^0.21.1",
      "babel-jest": "^26.6.3",
      "css-loader": "^5.2.6",
      "babel-plugin-import": "^1.13.3",
      "babel-plugin-module-resolver": "^4.1.0",
      "classnames": "^2.3.1",
      "cookie": "^0.4.1",
      "cross-env": "^7.0.2",
      "jest": "^26.6.3",
      "lodash": "^4.17.21",
      "next": "11.0.0",
      "next-plugin-antd-less": "^1.3.0",
      "normalize.css": "^8.0.1",
      "react": "17.0.2",
      "react-dom": "17.0.2",
      "react-hook-form": "^6.15.4",
      "ts-jest": "^26.5.3"
   },
   "devDependencies": {
      "@testing-library/react": "^11.2.6",
      "@types/antd": "^1.0.0",
      "@types/classnames": "^2.3.1",
      "@types/cookie": "^0.4.0",
      "@types/jest": "22.2.3",
      "@types/microsoft-graph": "^1.26.0",
      "@types/node": "^14.14.7",
      "@types/react": "^17.0.11",
      "@types/react-dom": "^16.9.9",
      "jest-junit": "^12.0.0",
      "react-test-renderer": "^17.0.2",
      "@testing-library/jest-dom": "5.12.0",
      "@testing-library/user-event": "13.1.8",
      "typescript": "^4.3.2"
   }

If somebody could guide me in the right direction, that would be great.

SolidZORO commented 3 years ago

I don't find the problem, can you show more error info or repo?

yy523697597 commented 3 years ago

I don't find the problem, can you show more error info or repo?

Hello, Could you please show me how to use less global variable. I required a less file include less varaible in _app.jsx. but I can't use it in styled-jsx component? if there is any way to use global less variable in styled-jsx component. Thanks for your plugin, it helps a lot.

yy523697597 commented 3 years ago

SolidZORO commented 3 years ago

@yy523697597 i have not used styled-jsx. you can try trans less vars to css vars. use this node script.

https://github.com/SolidZORO/mkr/blob/master/src/styles/_sync-vars-to-root.js

Mar-he commented 3 years ago

Is this thread now about a different problem? I am a bit confused.

I solved this by adding less and less-loader to the dependencies for now, but the a custom theme.less does not get picked up and variables do not apply.

Update: I've updated my config to:

 lessVarsFilePath: './styles/theme.less',
 lessVarsFilePathAppendToEndOfContent: true,

And now all themes apply. Let's see if this still works with a proper build. Too much has gone sideways so far.

SolidZORO / next-plugin-antd-less

Can't resolve less-loader #65