Làm thế nào để thêm SASS/SCSS vào một dự áncreate-react-app

Làm thế nào để thêm SASS SCSS vào một dự án create-react-app.md

Eject

Cần phải chạy Eject vì điều này là cần thiết để chỉnh sửa thủ công các tệp cấu hình webpack.

npm run eject

Install SASS

cài đặt precompiler (trình biên dịch trước)

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

Edit Webpack Config

Sau khi Eject dự án create-react-app bạn sẽ thấy xuất hiện thư mục config lộ ra các file cấu hình webpack đã ẩn đi trước đó có 2 chế độ phát triễn DEV MODE và PROD MODE TƯƠNG ỨNG

• config/webpack.config.dev.js
• config/webpack.config.prod.js

Tìm đoạn code dưới đây và sửa nhẹ 2 file trên như sau

...
{
             test: [/\.css$/,/\.(sass|scss)$/] , //cũ: test: /\.css$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                },
              },
              {
                loader: require.resolve('sass-loader'), /*bo sung sass-loader*/ 
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
            ],
},
...

OK ổn rồi

Từ giờ trở đi trong dự án react bạn được phép import song song .css và .scss vào file .js của mình và nó sẽ tự động build css khi chạy

import './styles/css/App.css';
import './styles/scss/App.scss';