CODEWITHSUNDEEP
reactjssassnext.js
user10334832
user10334832

Reputation:

Next js import scss error(ModuleParseError: Module parse failed: Unexpected character '�' (1:0))

My problem is

When i import scss files like below in 'ProjectFolder/components/header/Header.js'

(That Header.js is located same 'pages' directory level.v )

import "../../public/assets/scss/_reset.scss";

enter image description here

This error is evoked..

I also create next.config.js like this.

// next.config.js setting
const withSass = require('@zeit/next-sass');
module.exports = withSass();

And My package.json

enter image description here

I heard that '/' path is parsing automatically 'public' dir...

so i also tried 

import "/assets/scss/_reset.scss";

But same issue is published..

Can i know why..?

Thank you for your Read :)

Upvotes: 2

Views: 6620

Answers (2)

user10334832
user10334832

Reputation:

I solves this problem! changing 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;
    }
}));

Upvotes: 7

Martijn vW
Martijn vW

Reputation: 46

Did you create the file with a BOM (byte order mark) Check the file encoding and inspect the file with a plain text editor to remove the BOM. If the file needs to be in that encoding (probably utf-8) You might try to use webpack-utf8-bom from npm

Upvotes: 0

Related Questions