solidzoro / mkn

A Simple SSR Scaffolding for React Projects w/ Next.js and Typescript.

mkn (demo)

A Simple SSR Scaffolding for React Projects w/ Next.js and Typescript.

Less is supported by next-plugin-antd-less.

If you need CSR, you can use mkr.

© MIT

mkn's Issues

Minimum setup to use *.module.less

I use Typescript
My setup are
//next.config.js
const withAntdLess = require("next-plugin-antd-less");
const path = require("path");

module.exports = withAntdLess({
lessVarsFilePath: path.join(__dirname, "./styles/antd-custom.less"),
cssLoaderOptions: {
esModule: false,
sourceMap: false,
modules: {
mode: "local",
},
},

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

});

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

Module parse failed: Unexpected character '@'

Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
 > @import '../../style/themes/index';
 | @import '../../style/mixins/index';
 | @import './customize.less';

.babelrc.js

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

antd.less

@import "~antd/dist/antd.less";

@primary-color: #ff3f7b;

next.config.js

const withImages = require('next-images');
const withPlugins = require('next-compose-plugins');
const withAntdLess = require('next-plugin-antd-less');

const pluginAntdLess = withAntdLess({
  modifyVars: {
    '@primary-color': '#ff3f7b',
  },
  lessVarsFilePath: './src/styles/antd.less',
});


const nextSettings = {
  env: {
    title: 'test',
    titleDescription: 'testing',Ï
  },
};

module.exports = withPlugins([pluginAntdLess, withImages(), nextSettings]);

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@ant-design/icons": "^4.6.4",
    "@types/lodash": "^4.14.172",
    "antd": "^4.16.12",
    "axios": "^0.21.1",
    "babel-plugin-import": "^1.13.3",
    "dotenv": "^10.0.0",
    "formik": "^2.2.9",
    "formik-antd": "^2.0.1",
    "less": "^4.1.1",
    "lodash": "^4.17.21",
    "next": "^11.0.1",
    "next-images": "^1.8.1",
    "next-redux-saga": "^4.1.2",
    "next-redux-wrapper": "^7.0.2",
    "node-sass": "^4.14.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.4",
    "redux": "^4.1.1",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.1.3",
    "yup": "^0.32.9"
  },
  "devDependencies": {
    "@types/node": "^16.7.10",
    "@types/react": "^17.0.19",
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-less": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "less-loader": "^10.0.1",
    "less-vars-to-js": "^1.3.0",
    "next-compose-plugins": "^2.2.1",
    "next-plugin-antd-less": "^1.4.3",
    "next-with-less": "^1.0.1",
    "redux-devtools-extension": "^2.13.9",
    "typescript": "^4.4.2"
  }
}