ReactJS: Cài đặt môi trường SASS để sử dụng SCSS

setup-sass:

create-react-app setup-sass
cd setup-sass
npm start

installs sass:

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

Add remote:

git init
git remote add origin https://github.com/id1945/setup-sass.git

Commit code:

git add *
git commit -m "first commit"
git push origin master

Create webpack.config.dev.js:Waring: cần commit code trước khi chạy lệnh này!

npm run eject
npm install

Thêm đoạn code sau vào file webpack.config.dev.js

Waring: webpack.config.dev.js là mỗi trường local dev nếu deploy lên server chúng ta cần thêm ở file webpack.config.prod.js

webpack.config.dev.js

ReactJS 2018

{
  test: /\.scss$/,
  use: [{
      loader: "style-loader"
  }, {
      loader: "css-loader"
  }, {
      loader: "sass-loader",
      options: {
          includePaths: ["absolute/path/a", "absolute/path/b"]
      }
  }]
},

Test

index.scss

ReactJS 2018

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  color: red;
}

index.js

ReactJS 2018

import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';

ReactDOM.render(<h1>tttttttt</h1>, document.getElementById('root'));

Run app:

git add *
git commit -m "second commit"
git push origin master
npm start

Result

<< Github | Demo >>