terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

update && optimize with-ant-design-less example (#5658)

Browse source 
Current with-ant-design-less example has some problems.

- Upgrade next7, console found a 404 error.
![](https://user-gold-cdn.xitu.io/2018/11/11/167015fb80017e79?w=2606&h=1000&f=jpeg&s=124801)
  > After upgrade next7, .next folder didn't find /static/style.css and there is /static/css/style.chunk.css.
- The /_next/static/style.css link don't need be placed in the <Head> tag. The style.chunk.css file will be add in the head tag automatically after build.
- The project with more pages include _app.js, _document.js...the antd-custom.less will not work well.
  > The solution is use `modifyVars` of  `lessLoaderOptions`. It work well in my project~
This commit is contained in:
luffyZhou 2018-11-12 01:09:30 +08:00 committed by Tim Neutkens
parent b36382bb83
commit 8ed7795495
4 changed files with 16 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
examples/with-ant-design-less/asserts/antd-custom.less
View file

@ -1,4 +1,4 @@
@primary-color: #1DA57A; @primary-color: #52c41a;
@layout-header-height: 40px; @layout-header-height: 40px;
@border-radius-base: 0px; @border-radius-base: 2px;

1
examples/with-ant-design-less/index.js
View file

@ -7,7 +7,6 @@ export default ({ children }) =>
<Head> <Head>
<meta name='viewport' content='width=device-width, initial-scale=1' /> <meta name='viewport' content='width=device-width, initial-scale=1' />
<meta charSet='utf-8' /> <meta charSet='utf-8' />
<link rel='stylesheet' href='/_next/static/style.css' />
</Head> </Head>
<style jsx global>{` <style jsx global>{`
body { body {

13
examples/with-ant-design-less/next.config.js
View file

@ -1,5 +1,16 @@
/* eslint-disable */ /* eslint-disable */
const withLess = require('@zeit/next-less') 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, './asserts/antd-custom.less'),
'utf8'
)
)
// fix: prevents error when .less files are required by node // fix: prevents error when .less files are required by node
if (typeof require !== 'undefined') { if (typeof require !== 'undefined') {
@ -9,5 +20,7 @@ if (typeof require !== 'undefined') {
module.exports = withLess({ module.exports = withLess({
lessLoaderOptions: { lessLoaderOptions: {
javascriptEnabled: true, javascriptEnabled: true,
modifyVars: themeVariables // make your antd custom effective
}, },
}) })

1
examples/with-ant-design-less/package.json
View file

@ -11,6 +11,7 @@
"antd": "^3.5.4", "antd": "^3.5.4",
"babel-plugin-import": "^1.7.0", "babel-plugin-import": "^1.7.0",
"less": "3.0.4", "less": "3.0.4",
"less-vars-to-js": "1.3.0",
"next": "latest", "next": "latest",
"react": "^16.4.0", "react": "^16.4.0",
"react-dom": "^16.4.0" "react-dom": "^16.4.0"