React-starter-kit: scss loader problem

Created on 24 Feb 2016 · 4Comments · Source: kriasoft/react-starter-kit

file: /src/component/variables.scss

if I have add the @mixins syntax into the .scss file, It's doesn't work, console output like this:

ERROR in ./~/css-loader?sourceMap&modules&localIdentName=[name]_[local]_[hash:base64:3]!./~/postcss-loader?parser=postcss-scss!./src/components/App/App.scss
Module build failed: Error: Cannot find module 'postcss-mixins'
at Function.Module._resolveFilename (module.js:339:15)
at Function.Module._load (module.js:290:25)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object. (/Users/user/react/node_modules/precss/index.js:11:14)
at Module._compile (module.js:413:34)
at Module._extensions..js (module.js:422:10)
at Object.require.extensions.(anonymous function) as .js
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object.plugins (webpack.config.js:102:7)
at Object.module.exports (/Users/user/react/node_modules/postcss-loader/index.js:28:27)
@ ./src/components/App/App.scss 2:18-217

my code:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius( 10px ) }

Source

artkynet

Most helpful comment

@artkynet this kit does not include sass-loader,
you can install it manualy

npm install sass-loader node-sass webpack --save-dev

and configure webpack:

       test: /\.scss$/,
        loaders: [
          'isomorphic-style-loader',
          `css-loader?${DEBUG ? 'sourceMap' : 'minimize'}&modules&localIdentName=` +
          `${DEBUG ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]'}`,
          'postcss-loader?parser=postcss-scss',
          'sass-loader?sourceMap',
        ],

I have a working example: https://github.com/Bogdaan/react-auth-kit/blob/feature/scss-loader

Bogdaan on 24 Feb 2016

👍2 ❤1

All 4 comments

@artkynet this kit does not include sass-loader,
you can install it manualy

npm install sass-loader node-sass webpack --save-dev

and configure webpack:

       test: /\.scss$/,
        loaders: [
          'isomorphic-style-loader',
          `css-loader?${DEBUG ? 'sourceMap' : 'minimize'}&modules&localIdentName=` +
          `${DEBUG ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]'}`,
          'postcss-loader?parser=postcss-scss',
          'sass-loader?sourceMap',
        ],

I have a working example: https://github.com/Bogdaan/react-auth-kit/blob/feature/scss-loader

Bogdaan on 24 Feb 2016

👍2 ❤1

@Bogdaan thanks guys, resolved!

artkynet on 25 Feb 2016

@Bogdaan is your example still somewhere else? the link is a 404.
Thanks,

upq on 27 Apr 2016

@Bogdaan Thanks, I've been searching for the last couple of hours for what was causing this. Your solution worked for me. It would be nice if the starter kit actually worked out of the box.