search

svnm / react-router-redux-example

react, redux, react-router, reselect, css-modules
205 stars 54 forks source link

Sass won't work in prod build instead of css files #7

Closed dwilt closed 7 years ago

dwilt commented 8 years ago

First off, thanks for putting this together @StevenIseki. It's been a fabulous tool to start my project with.

I tried putting in the sass loader into the build and got it working easily and perfectly for dev but nothing but CSS files works for when trying to do npm run start:prod. It vomits saying:

/Users/danwilt/Projects/64i-v2/node_modules/babel-core/lib/transformation/file/index.js:591
      throw err;
      ^

SyntaxError: /Users/danwilt/Projects/64i-v2/src/components/App/App.scss: Unexpected token (1:1)
> 1 | @import '../../styles/animations';
    |  ^
  2 | @import "../../styles/variables";
  3 | 
  4 | :global {
    at Parser.pp.raise (/Users/danwilt/Projects/64i-v2/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:22:13)
    at Parser.pp.unexpected (/Users/danwilt/Projects/64i-v2/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:89:8)
    at Parser.pp.parseExprAtom (/Users/danwilt/Projects/64i-v2/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:517:12)
    at Parser.parseExprAtom (/Users/danwilt/Projects/64i-v2/node_modules/babel-core/node_modules/babylon/lib/plugins/jsx/index.js:18:22)
    at Parser.pp.parseExprSubscripts (/Users/danwilt/Projects/64i-v2/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:272:19)
    at Parser.pp.parseMaybeUnary (/Users/danwilt/Projects/64i-v2/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:252:19)
    at Parser.pp.parseExprOps (/Users/danwilt/Projects/64i-v2/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:183:19)
    at Parser.pp.parseMaybeConditional (/Users/danwilt/Projects/64i-v2/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:165:19)
    at Parser.pp.parseMaybeAssign (/Users/danwilt/Projects/64i-v2/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:128:19)
    at Parser.pp.parseDecorator (/Users/danwilt/Projects/64i-v2/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:199:26)

Why is babel trying to parse this as a JS file when I have a loader specifically targeting .scss files. I'm pretty sure I have it setup correctly because when I run npm run build and npm run start:dev it works correctly. Any ideas?

dwilt commented 8 years ago

I'd also love to pick your brain a bit over a screenshare some time and talk about how this build could be better. I think a lot of people could definitely use it.

svnm commented 8 years ago

Hi @dwilt thanks for the support. I have not been using sass all that much in my development setup, I have been preferring css modules. I would say this project is aiming at using css modules, and if you look through some of the issues on css modules over here you will see a few discussions on using sass, or even post-css plugins.

I did have a few issues setting up css modules server side, and had to use css-modules-require-hook so it would essentially ignore the css imports when running server side. I think this is the issue you are running in to that babel is having problems trying to run the sass import statements.

As far as looking into ideas for how to build this better, I would be keen for any suggestions and some help. I would suggest the most up to date approach currently for the css side of things is to use cssnext. I have an example of this approach on the following repo. I would love to update this example with cssnext and I think that would cover any of the sort of benefits sass gives you. Any help with that would be much appreciated.

I am hoping to work on cleaning up that other repo I have an porting some of those ideas across in the next few weeks. Some other benefits the newer example has is using Reselect, Normalizr as well as testing with enzyme.

svnm commented 7 years ago

This should work easily now in the latest version