21 July 2018

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 >>

0 nhận xét:

Post a Comment

 

BACK TO TOP

Xuống cuối trang