Comments (11)
I had the same problem like @jonaswindey.
It solved after I installed the style-loader and the css-loader.
https://github.com/webpack/style-loader
https://github.com/webpack/css-loader
So the install process:
npm install sass-loader node-sass webpack --save-dev
npm install style-loader --save-dev
npm install css-loader --save-dev
Modify webpack.config.js like this
module: { loaders: [ { test: /\.scss$/, loaders: ["style", "css", "sass"] } ] }
And the .js file like this require("./style.scss");
from react-starter.
I am having a different issue with this. It works when the browser is rendering, but when I prerender I get this:
return /msie 9\b/.test(window.navigator.userAgent.toLowerCase());
^
ReferenceError: window is not defined
at /Users/micgunnu/code/Finntech/employerify/build/prerender/main.js:2783:27
at /Users/micgunnu/code/Finntech/employerify/build/prerender/main.js:2778:48
at module.exports (/Users/micgunnu/code/Finntech/employerify/build/prerender/main.js:2799:69)
at Object.<anonymous> (/Users/micgunnu/code/Finntech/employerify/build/prerender/main.js:1845:38)
at __webpack_require__ (/Users/micgunnu/code/Finntech/employerify/build/prerender/main.js:21:30)
at Object.<anonymous> (/Users/micgunnu/code/Finntech/employerify/build/prerender/main.js:246:2)
at __webpack_require__ (/Users/micgunnu/code/Finntech/employerify/build/prerender/main.js:21:30)
at Object.<anonymous> (/Users/micgunnu/code/Finntech/employerify/build/prerender/main.js:94:36)
at __webpack_require__ (/Users/micgunnu/code/Finntech/employerify/build/prerender/main.js:21:30)
at Object.<anonymous> (/Users/micgunnu/code/Finntech/employerify/build/prerender/main.js:52:15)```
from react-starter.
https://github.com/webpack/react-starter/blob/master/make-webpack-config.js#L33
Looks like I bound it to the wrong extension...
from react-starter.
Looks like the style-loader
is used in prerender. By default the stylesheets are loaded by the null-loader
for prerendering (https://github.com/webpack/react-starter/blob/master/make-webpack-config.js#L104).
from react-starter.
When I change a file from css to sass i get an error showing tht the sass-loader is not installed, after I do it it starts to throw the following error:
ERROR in ./~/css-loader?module&localIdentName=[path][name]---[local]---[hash:base64:5]!./~/sass-loader!./app/containers/Application.sass
Module build failed:
body
^
Invalid CSS after "": expected 1 selector or at-rule, was "body "
in /media/WORK/workspace/react-starter/app/containers/Application.sass (line 1, column 1)
@ ./app/containers/Application.sass 4:14-191
and my applicatipn.sass
body
background: red
.this
opacity: 1
.this.loading
opacity: 0.2
transition: opacity 600ms
.this .loadingElement
display: none
.this.loading .loadingElement
display: inherit
.loadingElement
float: right
Any idea?
from react-starter.
@kaiomagalhaes I met the same issue as you yesterday night. Did you managed to solve it?
from react-starter.
@caedes Sorry bro, no. In the end I decided to use the scss.
from react-starter.
After trying many solutions finally, I am able to make it work.
Thanks @HunSpeedi
from react-starter.
@HunSpeedi, how did you get it to work on your side?
from react-starter.
@Hello-Zeze I wrote down above the full process! If you follow the instructions, that must be solve it i think.
from react-starter.
@HunSpeedi 's solution solved the issue for me. I installed the packages and previously had:
{
test: /.scss$/,
include: paths.appSrc,
loaders: ["style", "css", "sass"]
},
and it still didn't work. Once I deleted the line: "include: paths.appSrc,", everything complied nicely. Hope that helps.
from react-starter.
Related Issues (20)
- Can't find container issue HOT 1
- What is best way to handle user authentication?
- Cannot find module 'tapable' HOT 8
- Does not work with current version of react-router 1.0.0 HOT 1
- Can's see any css style in page
- Failed Proptype warning
- [OUTDATED]? HOT 3
- npm start
- wwe
- Help me :( Can't start webpack-dev-server
- Get requested domain?
- Error defining includePaths for sass-loader HOT 1
- Request: a way to use the production React build with this HOT 2
- No easy way to include "global" CSS HOT 1
- How to exclude files from prerender? HOT 2
- Where to put <head> HOT 2
- dev server should proxy api instead of vice versa
- Plugin system?
- React Router injected `query` prop
- vagrant installation method issues HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-starter.