Error on load sass from import file in next js

[ShintaroNippon]

I have this in next.config.js

const withSass = require('@zeit/next-sass');
const withCSS = require("@zeit/next-css");
module.exports = withCSS(withSass({
   webpack (config, options) {
       config.module.rules.push({

           test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
           use: {
               loader: 'url-loader',
               options: {
                   limit: 100000
               }
           }
       });

       return config;
   }
}));

I have this configuration but can't be loading CSS from saas files, for instance, I made import "./main.scss"; and is not loaded next js: 9.3
./components/landing/main.scss ModuleParseError: 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 (Source code omitted for this binary file)

can someone help with the right configuration?

thanks in advance
Carlos Vieira

[aralroca]

I highly recommend starting using the "build in CSS" support without @zeit/next-sass and @zeit/next-css plugins.

https://nextjs.org/docs/basic-features/built-in-css-support#sass-support

[vhfmag]

Hey there! I'm having the same issue and would be very interested in a working setup :)

@aralroca, about the built-in CSS support, it unfortunately doesn't allow importing global CSS from anywhere but the custom app file (pages/_app.js) and I need to import an internal React Component that involves importing a global CSS. My only option without overriding this restriction is (AFAIK) to import the components' CSS from the custom app, therefore loading potentially unneeded CSS in every route.

[aralroca]

@vhfmag with next-sass plugin you can use global styles everywhere, but is not recommended for collisions... the order is not guaranted. This was one of the biggest issues in next-sass, and the final solution to fix this is use the build in sass. Build in sass is going to replace next-sass in the future.

[ShintaroNippon]

HI thanks... but I have the same issue as

about the built-in CSS support, it unfortunately doesn't allow importing global CSS from anywhere but the custom app file (pages/_app.js)

is there something comming in next js new version ?