Unable to add styles

[greygatch]

module: {
    loaders: [
      {
        test: /\.js?/,
        loader: 'babel-loader',
        include: path.join(__dirname, 'app'),
      },
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader',
        include: path.join(__dirname, 'app')
      }
    ]
  }

SyntaxError: /Users/evan/code/universal-react/app/style.scss: Unexpected token, expected ; (1:5)
> 1 | body {
    |      ^
  2 |   text-align: center;
  3 | }

This project is apparently unable to allow for the addition of CSS modules via webpack

[jturbo26]

Hey @greygatch - I don't think it's this boilerplate's fault. You're only using a SCSS loader but you also need the CSS loader and the Style loader. The SCSS loader only converts SCSS to CSS, but webpack still needs to be able to read CSS.

[sekoyo]

Thanks for replying Joseph, and yep that sounds like the problem

On Mon, 31 Jul 2017 at 15:29, Joseph Turbin notifications@github.com wrote:

Hey @greygatch https://github.com/greygatch - I don't think it's this library's fault. You're only using a SCSS loader but you also need the CSS loader and the Style loader. The SCSS loader only converts SCSS to CSS, but webpack still needs to be able to read CSS.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/DominicTobias/universal-react/issues/31#issuecomment-319083908, or mute the thread https://github.com/notifications/unsubscribe-auth/AAuZ-mNcZiEqB_d5DW5FYOmsajh5az6zks5sTeTYgaJpZM4OguVG .

[greygatch]

@jturbo26 @DominicTobias

You're only using a SCSS loader but you also need the CSS loader and the Style loader

I don't understand. Am I not chaining the loaders together and using all three?

loader: 'style-loader!css-loader!sass-loader',

This is an old style to use multiple loaders, but it is supported.

[sekoyo]

Hm yeah I replied via email and didn't see the original post, looks correct so I'm not sure where the problem is, but there's nothing specific in this repo preventing it.

What's more likely is that this is the Node process encountering the scss import and Node doesn't know what to do with it. Try adding at the top of server.js:

require.extensions['.scss'] = () => {};

[jturbo26]

@greygatch Yep. My bad. I don't know how I didn't see that chain.

[greygatch]

@jturbo26 Just to make sure it didn't break with the new webpack release, I updated it to the new way.

Maybe it has something to do with the universal rendering?

{
    test: /\.scss$/,
    use: [
         'style-loader',
         'css-loader',
         'sass-loader'
    ],
    include: path.join(__dirname, 'app')
}

[jturbo26]

I don't think it's the universal rendering because I was able to get css to load. Are you sure you've installed all your loaders with npm install?

I don't use SASS, but I was able to get CSS modules working very easily. Here's part of my webpack config to compare.

module: {
    rules: [
      {
        test: /\.js?$/,
        use: 'babel-loader',
        include: path.join(__dirname, 'app'),
      },
      { test: /\.jsx$/, use: 'babel-loader', exclude: /node_modules/ },
      {
        test: /\.css?$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[name]_[local]_[hash:base64:5]',
            },
          },
        ],
      },
    ],
  },