Home  >  Article  >  Web Front-end  >  How to install sass in react

How to install sass in react

coldplay.xixi
coldplay.xixiOriginal
2020-11-26 16:30:504886browse

How to install sass in react: first install [sass-loader] and n[ode-sass] dependencies; then open the webpack configuration of react and make relevant modifications.

How to install sass in react

  • This method is suitable for all brands of computers

react How to install sass in:

1. Install sass-loader and node-sass dependencies

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

2. Open the react webpack configuration

node_modules/react-scripts/config/webpack.config.js

and find the module rules, oneof array, then find the last configuration and modify it as follows

            {
              loader: require.resolve('file-loader'),
              // Exclude `js` files to keep "css" loader working as it injects
              // its runtime that would otherwise be processed through "file" loader.
              // Also exclude `html` and `json` extensions so they get processed
              // by webpacks internal loaders.
              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
              options: {
                name: 'static/media/[name].[hash:8].[ext]',
              },
            },
            // ** STOP ** Are you adding a new loader?
            // Make sure to add the new loader(s) before the "file" loader.
          {
            test:/\.scss$/,
            loaders: ['style-loader', 'css-loader', 'sass-loader']
          }

How to install sass in react

3. In this way, you can happily use the scss file

How to install sass in react

Related free learning recommendations: javascript (video)

The above is the detailed content of How to install sass in react. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn