How to use scss directly in React components?

Question

I want to use scss directly in my components. Now I import css like this:

import './test.css';

return (
    <Container>
      <Col sm="12">
        <div className="test_wrapper">

I want to use like this: import './test.scss';

return (
    <Container>
      <Col sm="12">
        <div className="test_wrapper">

@Boy With Silver Wings and what next? I already have that plugin — rick1, Mar 02 '18 at 16:19
Attempt to use CommonJS' `require()` here. So `require("./test.scss")`. — wmash, Mar 02 '18 at 16:25
@rick if you are using weback, you need to install the `sass-loader` ind configure the module loaders — Hoyen, Mar 02 '18 at 16:32
I installed everything but I do not know how to configure it to use sass directly in my components — rick1, Mar 02 '18 at 16:38
can anybody instead of writing 100 comments just provide example? — rick1, Mar 02 '18 at 16:38

score 0 · Answer 1 · edited Mar 02 '18 at 17:52

0

As the comments already suggest, you need to install a webpack loader for scss.

npm i -D sass-loader

And add the rule to your webpack configuration.

{
  test: /\.scss$/,
  use: [ 'css-loader', 'sass-loader' ],
},

If you are using jest, you should also look into jest-css-modules, or you will run into problems.

edited Mar 02 '18 at 17:52

nbkhope

answered Mar 02 '18 at 16:43

lukas-reineke

I do not use jest – rick1 Mar 02 '18 at 16:44
{ 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 }] }, I have such a config in webpack.config.js bug it doesnt work – rick1 Mar 02 '18 at 16:50
Maybe you are missing the `style-loader`? That is the one that actually "applies" the styles. `css-loader` merely takes it in and puts in the JS file. `{ loader: "style-loader" // creates style nodes from JS strings }` Ref https://github.com/webpack-contrib/sass-loader – nbkhope Mar 02 '18 at 17:55

1 Answers1