Configuring next.config fileSass with CSS Modules & WebpackLoading font icons with ReactCreate React App with bootstrap cssHow to @import Compass in .SASS file within Simple React AppNext.js: Webpack ExtractTextPlugin not extracting scss in nodes_modules with next-sassWhat webpack4 loader is used to load *.svg files, *.gif, *.eot?Load CSS module in ReactJS + Typescript and react rewiredUsing string class names in React with css-loader and Webpack“ReactBingmaps” does not work with next - css file/module from node_modules is not supportedUsing webpack-dev-server 3 with parallel-webpack
US born but as a child of foreign diplomat
Why is "breaking the mould" positively connoted?
Is there a word that describe the non-justified use of a more complex word?
Why wasn't the Night King naked in S08E03?
Gerrymandering Puzzle - Rig the Election
Find the cheapest shipping option based on item weight
Can a Valor bard Ready a bard spell, then use the Battle Magic feature to make a weapon attack before releasing the spell?
Decoupling cap routing on a 4 layer PCB
In Russian, how do you idiomatically express the idea of the figurative "overnight"?
Refinish or replace an old staircase
Do publishers care if submitted work has already been copyrighted?
Appropriate certificate to ask for a fibre installation (ANSI/TIA-568.3-D?)
How do LIGO and VIRGO know that a gravitational wave has its origin in a neutron star or a black hole?
Adjacent DEM color matching in QGIS
How to write a 12-bar blues melody
What to use instead of cling film to wrap pastry
How long would it take for people to notice a mass disappearance?
Why did the Apollo 13 crew extend the LM landing gear?
How to safely wipe a USB flash drive
Adding command shortcuts to bin
What does "Managed by Windows" do in the Power options for network connection?
Can my company stop me from working overtime?
How can internet speed be 10 times slower without a router than when using a router?
Is there an idiom that support the idea that "inflation is bad"?
Configuring next.config file
Sass with CSS Modules & WebpackLoading font icons with ReactCreate React App with bootstrap cssHow to @import Compass in .SASS file within Simple React AppNext.js: Webpack ExtractTextPlugin not extracting scss in nodes_modules with next-sassWhat webpack4 loader is used to load *.svg files, *.gif, *.eot?Load CSS module in ReactJS + Typescript and react rewiredUsing string class names in React with css-loader and Webpack“ReactBingmaps” does not work with next - css file/module from node_modules is not supportedUsing webpack-dev-server 3 with parallel-webpack
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I am using Next.js and want to add the react-semantic-ui, to use one of their login components.
On the front-end I am getting this error:
Failed to compile
./node_modules/semantic-ui-css/semantic.min.css
ModuleParseError: 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)
This is the login component:
import React from 'react'
import Button, Form, Grid, Header, Image, Message, Segment from 'semantic-ui-react'
const Login = () => (
/* login JSX markup */
)
export default Login
This is my next.config.js
module.exports =
webpack: (config, dev ) =>
config.module.rules.push(
test: /.css$/,
loader: 'style-loader!css-loader'
,
test: /.s[a,
woff2)$/,
use:
loader: "url-loader",
options:
limit: 100000,
publicPath: "./",
outputPath: "static/",
name: "[name].[ext]"
,
test: [/.eot$/, /.ttf$/, /.svg$/, /.woff$/, /.woff2$/],
loader: require.resolve('file-loader'),
options:
name: '/static/media/[name].[hash:8].[ext]'
)
return config
const withCSS = require('@zeit/next-css')
module.exports = withCSS()
This is my package.js
"name": "create-next-example-app",
"scripts":
"dev": "nodemon server/index.js",
"build": "next build",
"start": "NODE_ENV=production node server/index.js"
,
"dependencies":
"@zeit/next-css": "^1.0.1",
"body-parser": "^1.18.3",
"cors": "^2.8.5",
"express": "^4.16.4",
"mongoose": "^5.4.19",
"morgan": "^1.9.1",
"next": "^8.0.3",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.86.0"
,
"devDependencies":
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"node-sass": "^4.11.0",
"nodemon": "^1.18.10",
"sass-loader": "^7.1.0",
"url-loader": "^1.1.2"
I read somewhere you have to include a _document.js in the pages directory.
// _document is only rendered on the server side and not on the client side
// Event handlers like onClick can't be added to this file
// ./pages/_document.js
import Document, Html, Head, Main, NextScript from 'next/document';
class MyDocument extends Document
static async getInitialProps(ctx)
const initialProps = await Document.getInitialProps(ctx);
return ...initialProps ;
render()
return (
<Html>
<Head>
<link rel='stylesheet'
href='//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css'
/>
</Head>
<body className="custom_class">
<Main />
<NextScript />
</body>
</Html>
);
export default MyDocument;
Is this really this hard?
Update
There is an alternate way of getting this to work.
When you start up your Next app you get a components folder which includes a head.js and a nav.js file.
The head.js file ultimately is analogous to a <head></head> tag in HTML. Or I should say that's what the head.js compiles to. ANYWAY, you can just add this in there:
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"
/>
and that will work.
But like I said you still can't import the modules like so:
import 'semantic-ui-css/semantic.min.css'
reactjs next.js semantic-ui-react
asked Mar 23 at 0:06
Antonio Pavicevac-OrtizAntonio Pavicevac-Ortiz
1,60611952
add a comment |
I am using Next.js and want to add the react-semantic-ui, to use one of their login components.
On the front-end I am getting this error:
Failed to compile
./node_modules/semantic-ui-css/semantic.min.css
ModuleParseError: 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)
This is the login component:
import React from 'react'
import Button, Form, Grid, Header, Image, Message, Segment from 'semantic-ui-react'
const Login = () => (
/* login JSX markup */
)
export default Login
This is my next.config.js
module.exports =
webpack: (config, dev ) =>
config.module.rules.push(
test: /.css$/,
loader: 'style-loader!css-loader'
,
test: /.s[a,
woff2)$/,
use:
loader: "url-loader",
options:
limit: 100000,
publicPath: "./",
outputPath: "static/",
name: "[name].[ext]"
,
test: [/.eot$/, /.ttf$/, /.svg$/, /.woff$/, /.woff2$/],
loader: require.resolve('file-loader'),
options:
name: '/static/media/[name].[hash:8].[ext]'
)
return config
const withCSS = require('@zeit/next-css')
module.exports = withCSS()
This is my package.js
"name": "create-next-example-app",
"scripts":
"dev": "nodemon server/index.js",
"build": "next build",
"start": "NODE_ENV=production node server/index.js"
,
"dependencies":
"@zeit/next-css": "^1.0.1",
"body-parser": "^1.18.3",
"cors": "^2.8.5",
"express": "^4.16.4",
"mongoose": "^5.4.19",
"morgan": "^1.9.1",
"next": "^8.0.3",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.86.0"
,
"devDependencies":
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"node-sass": "^4.11.0",
"nodemon": "^1.18.10",
"sass-loader": "^7.1.0",
"url-loader": "^1.1.2"
I read somewhere you have to include a _document.js in the pages directory.
// _document is only rendered on the server side and not on the client side
// Event handlers like onClick can't be added to this file
// ./pages/_document.js
import Document, Html, Head, Main, NextScript from 'next/document';
class MyDocument extends Document
static async getInitialProps(ctx)
const initialProps = await Document.getInitialProps(ctx);
return ...initialProps ;
render()
return (
<Html>
<Head>
<link rel='stylesheet'
href='//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css'
/>
</Head>
<body className="custom_class">
<Main />
<NextScript />
</body>
</Html>
);
export default MyDocument;
Is this really this hard?
Update
There is an alternate way of getting this to work.
When you start up your Next app you get a components folder which includes a head.js and a nav.js file.
The head.js file ultimately is analogous to a <head></head> tag in HTML. Or I should say that's what the head.js compiles to. ANYWAY, you can just add this in there:
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"
/>
and that will work.
But like I said you still can't import the modules like so:
import 'semantic-ui-css/semantic.min.css'
reactjs next.js semantic-ui-react
asked Mar 23 at 0:06
Antonio Pavicevac-OrtizAntonio Pavicevac-Ortiz
1,60611952
Does your app compiles normally with CSS that don't have@importstatements?
– Nino Filiu
Mar 23 at 0:12
@NinoFiliu It doesn't compile at all....
– Antonio Pavicevac-Ortiz
Mar 23 at 0:26
The error might be coming from Webpack. Check this article that does a great job at explaining webpack loaders - what the are, why they are needed and how to use them. In your case, your error looks like Webpack encountered a CSS file but didn't have the required loaders + config to "understand" it.
– Nino Filiu
Mar 23 at 0:32
@NinoFiliu Thanks my friend, I'll take a look. I bet there is a place somewhere where you have to explicitly configure Webpack.
– Antonio Pavicevac-Ortiz
Mar 23 at 0:48
add a comment |
I am using Next.js and want to add the react-semantic-ui, to use one of their login components.
On the front-end I am getting this error:
Failed to compile
./node_modules/semantic-ui-css/semantic.min.css
ModuleParseError: 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)
This is the login component:
import React from 'react'
import Button, Form, Grid, Header, Image, Message, Segment from 'semantic-ui-react'
const Login = () => (
/* login JSX markup */
)
export default Login
This is my next.config.js
module.exports =
webpack: (config, dev ) =>
config.module.rules.push(
test: /.css$/,
loader: 'style-loader!css-loader'
,
test: /.s[a,
woff2)$/,
use:
loader: "url-loader",
options:
limit: 100000,
publicPath: "./",
outputPath: "static/",
name: "[name].[ext]"
,
test: [/.eot$/, /.ttf$/, /.svg$/, /.woff$/, /.woff2$/],
loader: require.resolve('file-loader'),
options:
name: '/static/media/[name].[hash:8].[ext]'
)
return config
const withCSS = require('@zeit/next-css')
module.exports = withCSS()
This is my package.js
"name": "create-next-example-app",
"scripts":
"dev": "nodemon server/index.js",
"build": "next build",
"start": "NODE_ENV=production node server/index.js"
,
"dependencies":
"@zeit/next-css": "^1.0.1",
"body-parser": "^1.18.3",
"cors": "^2.8.5",
"express": "^4.16.4",
"mongoose": "^5.4.19",
"morgan": "^1.9.1",
"next": "^8.0.3",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.86.0"
,
"devDependencies":
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"node-sass": "^4.11.0",
"nodemon": "^1.18.10",
"sass-loader": "^7.1.0",
"url-loader": "^1.1.2"
I read somewhere you have to include a _document.js in the pages directory.
// _document is only rendered on the server side and not on the client side
// Event handlers like onClick can't be added to this file
// ./pages/_document.js
import Document, Html, Head, Main, NextScript from 'next/document';
class MyDocument extends Document
static async getInitialProps(ctx)
const initialProps = await Document.getInitialProps(ctx);
return ...initialProps ;
render()
return (
<Html>
<Head>
<link rel='stylesheet'
href='//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css'
/>
</Head>
<body className="custom_class">
<Main />
<NextScript />
</body>
</Html>
);
export default MyDocument;
Is this really this hard?
Update
There is an alternate way of getting this to work.
When you start up your Next app you get a components folder which includes a head.js and a nav.js file.
The head.js file ultimately is analogous to a <head></head> tag in HTML. Or I should say that's what the head.js compiles to. ANYWAY, you can just add this in there:
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"
/>
and that will work.
But like I said you still can't import the modules like so:
import 'semantic-ui-css/semantic.min.css'
reactjs next.js semantic-ui-react
asked Mar 23 at 0:06
Antonio Pavicevac-OrtizAntonio Pavicevac-Ortiz
1,60611952
I am using Next.js and want to add the react-semantic-ui, to use one of their login components.
On the front-end I am getting this error:
Failed to compile
./node_modules/semantic-ui-css/semantic.min.css
ModuleParseError: 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)
This is the login component:
import React from 'react'
import Button, Form, Grid, Header, Image, Message, Segment from 'semantic-ui-react'
const Login = () => (
/* login JSX markup */
)
export default Login
This is my next.config.js
module.exports =
webpack: (config, dev ) =>
config.module.rules.push(
test: /.css$/,
loader: 'style-loader!css-loader'
,
test: /.s[a,
woff2)$/,
use:
loader: "url-loader",
options:
limit: 100000,
publicPath: "./",
outputPath: "static/",
name: "[name].[ext]"
,
test: [/.eot$/, /.ttf$/, /.svg$/, /.woff$/, /.woff2$/],
loader: require.resolve('file-loader'),
options:
name: '/static/media/[name].[hash:8].[ext]'
)
return config
const withCSS = require('@zeit/next-css')
module.exports = withCSS()
This is my package.js
"name": "create-next-example-app",
"scripts":
"dev": "nodemon server/index.js",
"build": "next build",
"start": "NODE_ENV=production node server/index.js"
,
"dependencies":
"@zeit/next-css": "^1.0.1",
"body-parser": "^1.18.3",
"cors": "^2.8.5",
"express": "^4.16.4",
"mongoose": "^5.4.19",
"morgan": "^1.9.1",
"next": "^8.0.3",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.86.0"
,
"devDependencies":
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"node-sass": "^4.11.0",
"nodemon": "^1.18.10",
"sass-loader": "^7.1.0",
"url-loader": "^1.1.2"
I read somewhere you have to include a _document.js in the pages directory.
// _document is only rendered on the server side and not on the client side
// Event handlers like onClick can't be added to this file
// ./pages/_document.js
import Document, Html, Head, Main, NextScript from 'next/document';
class MyDocument extends Document
static async getInitialProps(ctx)
const initialProps = await Document.getInitialProps(ctx);
return ...initialProps ;
render()
return (
<Html>
<Head>
<link rel='stylesheet'
href='//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css'
/>
</Head>
<body className="custom_class">
<Main />
<NextScript />
</body>
</Html>
);
export default MyDocument;
Is this really this hard?
Update
There is an alternate way of getting this to work.
When you start up your Next app you get a components folder which includes a head.js and a nav.js file.
The head.js file ultimately is analogous to a <head></head> tag in HTML. Or I should say that's what the head.js compiles to. ANYWAY, you can just add this in there:
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"
/>
and that will work.
But like I said you still can't import the modules like so:
import 'semantic-ui-css/semantic.min.css'
reactjs next.js semantic-ui-react
reactjs next.js semantic-ui-react
asked Mar 23 at 0:06
Antonio Pavicevac-OrtizAntonio Pavicevac-Ortiz
1,60611952
asked Mar 23 at 0:06
Antonio Pavicevac-OrtizAntonio Pavicevac-Ortiz
1,60611952
edited Mar 23 at 15:10
Antonio Pavicevac-Ortiz
asked Mar 23 at 0:06
Antonio Pavicevac-OrtizAntonio Pavicevac-Ortiz
1,60611952
asked Mar 23 at 0:06
Antonio Pavicevac-OrtizAntonio Pavicevac-Ortiz
1,60611952
asked Mar 23 at 0:06
Antonio Pavicevac-OrtizAntonio Pavicevac-Ortiz
1,60611952
1,60611952
Does your app compiles normally with CSS that don't have@importstatements?
– Nino Filiu
Mar 23 at 0:12
@NinoFiliu It doesn't compile at all....
– Antonio Pavicevac-Ortiz
Mar 23 at 0:26
The error might be coming from Webpack. Check this article that does a great job at explaining webpack loaders - what the are, why they are needed and how to use them. In your case, your error looks like Webpack encountered a CSS file but didn't have the required loaders + config to "understand" it.
– Nino Filiu
Mar 23 at 0:32
@NinoFiliu Thanks my friend, I'll take a look. I bet there is a place somewhere where you have to explicitly configure Webpack.
– Antonio Pavicevac-Ortiz
Mar 23 at 0:48
add a comment |
Does your app compiles normally with CSS that don't have@importstatements?
– Nino Filiu
Mar 23 at 0:12
@NinoFiliu It doesn't compile at all....
– Antonio Pavicevac-Ortiz
Mar 23 at 0:26
The error might be coming from Webpack. Check this article that does a great job at explaining webpack loaders - what the are, why they are needed and how to use them. In your case, your error looks like Webpack encountered a CSS file but didn't have the required loaders + config to "understand" it.
– Nino Filiu
Mar 23 at 0:32
@NinoFiliu Thanks my friend, I'll take a look. I bet there is a place somewhere where you have to explicitly configure Webpack.
– Antonio Pavicevac-Ortiz
Mar 23 at 0:48
Does your app compiles normally with CSS that don't have
@import statements?– Nino Filiu
Mar 23 at 0:12
Does your app compiles normally with CSS that don't have
@import statements?– Nino Filiu
Mar 23 at 0:12
@NinoFiliu It doesn't compile at all....
– Antonio Pavicevac-Ortiz
Mar 23 at 0:26
@NinoFiliu It doesn't compile at all....
– Antonio Pavicevac-Ortiz
Mar 23 at 0:26
The error might be coming from Webpack. Check this article that does a great job at explaining webpack loaders - what the are, why they are needed and how to use them. In your case, your error looks like Webpack encountered a CSS file but didn't have the required loaders + config to "understand" it.
– Nino Filiu
Mar 23 at 0:32
The error might be coming from Webpack. Check this article that does a great job at explaining webpack loaders - what the are, why they are needed and how to use them. In your case, your error looks like Webpack encountered a CSS file but didn't have the required loaders + config to "understand" it.
– Nino Filiu
Mar 23 at 0:32
@NinoFiliu Thanks my friend, I'll take a look. I bet there is a place somewhere where you have to explicitly configure Webpack.
– Antonio Pavicevac-Ortiz
Mar 23 at 0:48
@NinoFiliu Thanks my friend, I'll take a look. I bet there is a place somewhere where you have to explicitly configure Webpack.
– Antonio Pavicevac-Ortiz
Mar 23 at 0:48
add a comment |
1 Answer
1
active
oldest
votes
So it looks like I had to do the following to get this to work:
Changing my next.config.js file to:
const withCSS = require('@zeit/next-css')
module.exports = withCSS(
webpack: function (config)
config.module.rules.push(ttf)
return config
)
And doing an npm i css-loader file-loader url-loader -D did the trick.
However I'm baffled as to why css-loader file-loader are needed? I'm used to webpack configs where you are explicitly adding the loaders (Like we are adding the url-loader above)... I didn't have to here!
answered Mar 23 at 20:03
Antonio Pavicevac-OrtizAntonio Pavicevac-Ortiz
1,60611952
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55309300%2fconfiguring-next-config-file%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
So it looks like I had to do the following to get this to work:
Changing my next.config.js file to:
const withCSS = require('@zeit/next-css')
module.exports = withCSS(
webpack: function (config)
config.module.rules.push(ttf)
return config
)
And doing an npm i css-loader file-loader url-loader -D did the trick.
However I'm baffled as to why css-loader file-loader are needed? I'm used to webpack configs where you are explicitly adding the loaders (Like we are adding the url-loader above)... I didn't have to here!
answered Mar 23 at 20:03
Antonio Pavicevac-OrtizAntonio Pavicevac-Ortiz
1,60611952
add a comment |
So it looks like I had to do the following to get this to work:
Changing my next.config.js file to:
const withCSS = require('@zeit/next-css')
module.exports = withCSS(
webpack: function (config)
config.module.rules.push(ttf)
return config
)
And doing an npm i css-loader file-loader url-loader -D did the trick.
However I'm baffled as to why css-loader file-loader are needed? I'm used to webpack configs where you are explicitly adding the loaders (Like we are adding the url-loader above)... I didn't have to here!
answered Mar 23 at 20:03
Antonio Pavicevac-OrtizAntonio Pavicevac-Ortiz
1,60611952
add a comment |
So it looks like I had to do the following to get this to work:
Changing my next.config.js file to:
const withCSS = require('@zeit/next-css')
module.exports = withCSS(
webpack: function (config)
config.module.rules.push(ttf)
return config
)
And doing an npm i css-loader file-loader url-loader -D did the trick.
However I'm baffled as to why css-loader file-loader are needed? I'm used to webpack configs where you are explicitly adding the loaders (Like we are adding the url-loader above)... I didn't have to here!
answered Mar 23 at 20:03
Antonio Pavicevac-OrtizAntonio Pavicevac-Ortiz
1,60611952
So it looks like I had to do the following to get this to work:
Changing my next.config.js file to:
const withCSS = require('@zeit/next-css')
module.exports = withCSS(
webpack: function (config)
config.module.rules.push(ttf)
return config
)
And doing an npm i css-loader file-loader url-loader -D did the trick.
However I'm baffled as to why css-loader file-loader are needed? I'm used to webpack configs where you are explicitly adding the loaders (Like we are adding the url-loader above)... I didn't have to here!
answered Mar 23 at 20:03
Antonio Pavicevac-OrtizAntonio Pavicevac-Ortiz
1,60611952
answered Mar 23 at 20:03
Antonio Pavicevac-OrtizAntonio Pavicevac-Ortiz
1,60611952
answered Mar 23 at 20:03
Antonio Pavicevac-OrtizAntonio Pavicevac-Ortiz
1,60611952
answered Mar 23 at 20:03
Antonio Pavicevac-OrtizAntonio Pavicevac-Ortiz
1,60611952
1,60611952
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55309300%2fconfiguring-next-config-file%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Does your app compiles normally with CSS that don't have
@importstatements?– Nino Filiu
Mar 23 at 0:12
@NinoFiliu It doesn't compile at all....
– Antonio Pavicevac-Ortiz
Mar 23 at 0:26
The error might be coming from Webpack. Check this article that does a great job at explaining webpack loaders - what the are, why they are needed and how to use them. In your case, your error looks like Webpack encountered a CSS file but didn't have the required loaders + config to "understand" it.
– Nino Filiu
Mar 23 at 0:32
@NinoFiliu Thanks my friend, I'll take a look. I bet there is a place somewhere where you have to explicitly configure Webpack.
– Antonio Pavicevac-Ortiz
Mar 23 at 0:48