Using sass with nwb

[modsoussi]

This issue is a:

• [ ] Bug report
• [ ] Feature request
• [x] Question / support request
• [ ] Other

These checks might help you diagnose whether something is wrong with nwb or your setup:

Is the version of nwb you're using installed globally or locally? globally

Which modules are installed in your project?

npm ls --depth=0
├── autoprefixer-loader@3.2.0
├── babel-preset-es2015@6.22.0
├── babel-preset-react@6.23.0
├── babel-preset-stage-0@6.22.0
├── babel-register@6.23.0
├── ejs@2.5.6
├── express@4.14.1
├── extract-text-webpack-plugin@2.0.0
├── node-sass@4.5.0
├── nwb-sass@0.7.1
├── path@0.12.7
├── react@15.4.2
├── react-dom@15.4.2
├── react-router@3.0.2
├── react-router-scroll@0.4.1
├── sass-loader@6.0.2
├── style-loader@0.13.2
└── webpack@2.2.1

Which versions of Node.js, npm and nwb are you using (if using it globally)?

node -v v7.3.0
npm -v 3.10.10
# If nwb is being used as a global install
nwb -v v0.15.6

I'm trying to use sass in my project and in doing so I installed nwb-sass and added

sass: {
   data: '@import "_variables"',
   includePaths: [path.resolve('src/styles')]
}

to webpack.rules and this casses the following errors to be thrown when I try to build:

Failed to compile with 3 errors.

 ERROR  in ./src/sass/_styles.scss
Module build failed: 
@import "_route2";
^
      Media query expression must begin with '('
      in /Users/modsoussi/CS/React/react-code-splitting-test/src/sass/_styles.scss (line 2, column 1)
 @ ./src/sass/_styles.scss 4:14-319
 @ ./src/index.js
 @ multi /usr/local/lib/~/nwb/polyfills.js ./src/index.js

 ERROR  in ./src/sass/_styles.scss
Module build failed: Error
    at /usr/local/lib/node_modules/nwb/node_modules/webpack/lib/NormalModule.js:141:35
    at /usr/local/lib/node_modules/nwb/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /usr/local/lib/node_modules/nwb/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/usr/local/lib/node_modules/nwb/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.onRender [as callback] (/Users/modsoussi/CS/React/react-code-splitting-test/node_modules/nwb-sass/node_modules/sass-loader/index.js:273:13)
    at Object.<anonymous> (/Users/modsoussi/CS/React/react-code-splitting-test/node_modules/async/dist/async.js:2237:31)
    at apply (/Users/modsoussi/CS/React/react-code-splitting-test/node_modules/async/dist/async.js:20:25)
    at Object.<anonymous> (/Users/modsoussi/CS/React/react-code-splitting-test/node_modules/async/dist/async.js:56:12)
    at Object.callback (/Users/modsoussi/CS/React/react-code-splitting-test/node_modules/async/dist/async.js:843:16)
    at options.error (/Users/modsoussi/CS/React/react-code-splitting-test/node_modules/node-sass/lib/index.js:294:32)

 ERROR  in /Users/modsoussi/CS/React/react-code-splitting-test/src/sass/_styles.scss doesn't export content

However, when I put the sass block inside a sass-style, like so:

'sass-style: {
   sass: {
      data: '@import "_variables"',
      includePaths: [path.resolve('src/styles')]
   }
}

everything works fine. I thought this was strange and thought I'd let you know. Also, if I want to compile my src/sass files into css and put those files in dist/css how do I go about that?

Thanks for the awesome work, I'm loving nwb!

[modsoussi]

Found the issue. Should be

'sass-style: {
   sass: {
      data: '@import "_variables";',
      includePaths: [path.resolve('src/styles')]
   }
}

instead of what's on the docs. Semicolons are important.