Next.js: example-with-css should be complete
Examples bug report
Example name
with-next-css
Describe the bug
this example is too simple.
- and, when try to add a
background: url(xxx.png);into the css file，it will crash:
.adiv {
background: url(2.jpg);
}
then you can see:
Error in ./2.jpg
Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file)
- how should I do when I already have some other config in
next.config.js?
the config in this example just export a wholewithCSS()，if I have some other config such as a function, how should I merge them?
some other problems
I like next.js and trying to use it to re-construct an old project, when I wrote a demo page(seem like the old one), I met serval UNBELIEVABLE problem:
- why when I trying to import a
cssfile it gave me a crash?
after searched, ok, I tried to use next-css，but I still got a crash!
- why
next-csscan not resolve the images in the css file?
I ran out and put the css link into <Head />, then the problem seems be resolved.
but when I trying to import an React UI framework (such as ant.design), it supports partial import... so I stuck here, because I can't import partial css from it.
How can I solve the problem? I think import css is a basic demand in React, but how it becomes so difficult in next.js...I am becoming a bad temper guy...sorry
wslx520
All 8 comments
You'll have to add https://github.com/arefaslani/next-images or https://github.com/cyrilwanner/next-optimized-images
timneutkens
on 11 Jul 2018
@timneutkens ok, and I searched in the docs and get how to merge the config, so my next.config.js is like this:
const withCSS = require('@zeit/next-css');
const withSASS = require('@zeit/next-sass');
const withOptimizedImages = require('next-optimized-images');
module.exports = withOptimizedImages(withCSS(withSASS ({
cssModules: true
})));
thank god there are not too much plugins I have to use, maybe one more proxy plugin.
sorry to say, I don't think this is a good way
wslx520
on 12 Jul 2018
I have tried next.js & nuxt.js in the meantime, it's so simple in nuxt.js to import css/less/sass file --- just installed css-loader/less-loader/sass-loader, no extra work, I think it's the right way.
I can not understand why abandoned so convenient, proven webpack loaders but implement these basic features by self. when I searched on google, most of people were asking : HOW could I import external css/less/sass file in next.js? and there were no standard ways, no official solution. So frustrated!
I think it's time to solve these problems, once and forever.
wslx520
on 12 Jul 2018
@wslx520 you don't have to use next js plugins, instead of using next-images you can install and configure url-loader. Everything you need to compile you can configure in next.config.js.
This is very basic example, you can do it with less, sass or fonts etc.
kv9991
on 14 Jul 2018
@kv9991 got it. I should read source codes of next-css or next-sass, I found they just add configure to webpack. I know how should I do now, thank u
wslx520
on 25 Jul 2018
@kv9991 got it. I should read source codes of
next-cssornext-sass, I found they just add configure to webpack. I know how should I do now, thank u
can you show me your solution example? I have that problem!
Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file)
chitogamer96
on 17 Sep 2018
@chitogamer96
module.exports = withCSS(withSASS(withOptimizedImages(config)));
just like this.
By the way, I recommend to use the latest canary version of next.js (and plugins) , it will solve some problems automatically
wslx520
on 18 Sep 2018
Closing this in favor of an RFC @Timer is working on.
timneutkens
on 9 Aug 2019
Related issues
olifante
·
3Comments
YarivGilad
·
3Comments
swrdfish
·
3Comments
havefive
·
3Comments
lixiaoyan
·
3Comments
Most helpful comment
I have tried next.js & nuxt.js in the meantime, it's so simple in nuxt.js to import css/less/sass file --- just installed css-loader/less-loader/sass-loader, no extra work, I think it's the right way.
I can not understand why abandoned so convenient, proven webpack loaders but implement these basic features by self. when I searched on google, most of people were asking : HOW could I import external css/less/sass file in next.js? and there were no standard ways, no official solution. So frustrated!
I think it's time to solve these problems, once and forever.