How to add sass to webpack + react?

Good day!

How to add sass in cofig webpack + react?

var path = require('path');

var BUILD_DIR = path.resolve(__dirname, './');
var APP_DIR = path.resolve(__dirname, 'src/');

var config = {
 entry: APP_DIR + '/index.jsx',
 output: {
 path: BUILD_DIR,
 filename: 'bundle.js'
},
 devServer: {
 contentBase: BUILD_DIR
},
 module: {
 loaders: [
{
 test: /\.the jsx?/,
 include: APP_DIR,
 loader: 'babel-loader'
}
]
}
};

module.exports = config;


It is desirable to be able to connect like this: import './style.sass'

git

Error:

ERROR in ./src/index.jsx
Module parse failed: C:\Users\steko\Desktop\TEST\m-react\src\index.jsx Unexpected token (9:8)
You may need an appropriate loader to handle this file type.
| render () {
| return (
|
| Hello React Project!!!
|
June 14th 19 at 21:03
2 answers
June 14th 19 at 21:05
Solution
Use the sass-loader. The repository has installation instructions. If you want to use CSS modules, read the instructions for the css-loader
I have not got the loader right shift and Import. Wrote they say that the garbage in the js sass. I understand it's just for sass to css, and I react+js sass to css. - Camylle_Ondricka31 commented on June 14th 19 at 21:08
read the user manual carefully. You just installed css laoder and style-laoder? - matt_Bahringer commented on June 14th 19 at 21:11
Yes, it gives an error(updated question) - Camylle_Ondricka31 commented on June 14th 19 at 21:14
went to the repository. Why do you use simultaneously and rules and loaders in webpack.config? Use only rules - matt_Bahringer commented on June 14th 19 at 21:17
I just yesterday more or less with webpack met, as a rule? the loaders were in the example at the connection react. - Camylle_Ondricka31 commented on June 14th 19 at 21:20
June 14th 19 at 21:07
Solution
and what the create-react-app does not do a service ? there it is, out of the box, only need to include
in custom there is - Camylle_Ondricka31 commented on June 14th 19 at 21:10
I need other file - matt_Bahringer commented on June 14th 19 at 21:13
have not looked into the repository create-react-app, in recent times there's even a mention about less/sass was not. - Camylle_Ondricka31 commented on June 14th 19 at 21:16
that sort of thing https://www.npmjs.com/package/create-react-app-sass - matt_Bahringer commented on June 14th 19 at 21:19
no , in fact, create-react-app there are instructions on how to connect a css preprocessor - Camylle_Ondricka31 commented on June 14th 19 at 21:22

Find more questions by tags JavaScriptWebpackReactSassNode.js