Next-plugins: How to use multiple less files?
I'm trying for a few hours to make a more organized folder scheme in "./pages" where each page has its own style file, something like this:
├── About
│ ├─ index.js
│ └─ styles.less
└── Home
├─ index.js
└─ styles.less
I'm importing this way, into every "index.js" of the folders: import './styles.less' but it just does not seem to work, apparently just to use a style file in the whole application :(
Can only import 1 file or am I doing something wrong?
my next.config.js:
const withLess = require('@zeit/next-less')
const withCSS = require('@zeit/next-css')
module.exports = withCSS(withLess())
iagobruno
All 6 comments
Hi @httpiago,
Your structure should work!
You need a _document.js file where you need to include your compiled CSS file:
import Document, { Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<html>
<Head>
<link rel="stylesheet" href="/_next/static/style.css" />
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}
Then in your next.config.js:
const withLess = require('@zeit/next-less')
module.exports = withLess()
I tested with this and your structure worked well:
├── About
│ ├─ index.js
│ └─ styles.less
└── Home
├─ index.js
└─ styles.less
The working solution:
testing-next.zip
miukimiu
on 2 Jul 2018
But i want to use style.less in every compoent and every page, and then it just does not seem to work...
BosenY
on 6 Jul 2018
In the zip folder that I sent, I'm importing a LESS file into the index.js of the About folder. And I'm importing another less file into the index.js of the Home folder and it's working:
https://testing-next-dkzbtqsxke.now.sh/About
https://testing-next-dkzbtqsxke.now.sh/Home
I'm following the @httpiago structure:
```
pages
├── About
│ ├─ index.js
│ └─ styles.less
└── Home
├─ index.js
└─ styles.less
````
So you can definitley use more that one LESS file in the whole application.
miukimiu
on 9 Jul 2018
I'm using the same example you sent @miukimiu and it still does not work until today, it only imports the first .less file but those of the other components it ignores.
Can only contain one style file per page?
iagobruno
on 13 Sep 2018
Try next@canary with @zeit/next-less@canary. Should be fixed there.
timneutkens
on 13 Sep 2018
Does not work with imported components as of today, even using the canary releases
EDIT: My mistake, I forgot to disable the flag cssModules: true inside the next.config.js file. Doing this will generate scrambled hash class names and if you just use the normal class names they won't be assigned the right style in the browser.
kenjinp
on 31 Mar 2019
Related issues
mitaxe
·
4Comments
elliottsj
·
3Comments
asicfr
·
3Comments
znarf
·
3Comments
derindutz
·
3Comments
Most helpful comment
Try
next@canarywith@zeit/next-less@canary. Should be fixed there.