saikat / react-apollo-starter-kit

A production-ready starter kit for making a React/Apollo application.
MIT License
186 stars 28 forks source link

How to use sass-loader? #21

Open delgermurun opened 7 years ago

delgermurun commented 7 years ago

I've tried to use sass, but it throws error. I couldn't even use css file.

1:50:28 PM server.1 |  [nodemon] to restart at any time, enter `rs`
1:50:28 PM server.1 |  [nodemon] watching: /webApp/src/**/*
1:50:28 PM server.1 |  [nodemon] starting `./dev-tools/babel-run ./src/server`
1:50:29 PM server.1 |  src/components/style.css:1
1:50:29 PM server.1 |  (function (exports, require, module, __filename, __dirname) { .button {
1:50:29 PM server.1 |                                                                ^
1:50:29 PM server.1 |  SyntaxError: Unexpected token .
1:50:29 PM server.1 |      at Object.exports.runInThisContext (vm.js:76:16)
1:50:29 PM server.1 |      at Module._compile (module.js:542:28)
1:50:29 PM server.1 |      at loader (/webApp/node_modules/babel-register/lib/node.js:144:5)
1:50:29 PM server.1 |      at Object.require.extensions.(anonymous function) [as .js] (/webApp/n
1:50:29 PM server.1 |  >  ode_modules/babel-register/lib/node.js:154:7)

My rules are:

rules: [
      { test: /\.json$/, loader: 'json-loader' },
      { test: /\.css$/, loader: 'style-loader!css' },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /(node_modules|bower_components)/,
        query: {
          cacheDirectory: DEBUG
        }
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader' // creates style nodes from JS strings
          }, {
            loader: 'css-loader' // translates CSS into CommonJS
          }, {
            loader: 'sass-loader' // compiles Sass to CSS
          }
        ]
      }
    ]

What am I doing wrong? Please help me. Thanks

CostaRico commented 7 years ago