create-react-app使用sass,scss语法

系统管理员 2023-05-31 07:15 53阅读 0赞

# **使用create-react-app(新版)安装完项目之后。** #

1.执行**npm install sass-loader node-sass --save-dev**安装sass这两个相关的插件。

2.写一个scss文件

.userStTitle{
        background: red;
        p{
            font-size: 12px;
            span{
                color: green;
            }
        }
        div{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
    }

3.直接在组件中引入scss文件

import { Button, Card, Icon, Input, Layout, List, Menu, Progress, Select, Popconfirm, Pagination } from 'antd';
    import echarts from 'echarts';
    import React, { Component } from 'react';
    import { connect } from 'react-redux';
    import { navChanged } from '../../action/actions';
    import '../../asset/css/newCss/common.css';
    import '../../asset/css/newCss/scss/user.scss';
    import '../../asset/css/newCss/userlist.css';
    import '../../asset/font/iconfont.css';
    import '../../asset/css/newCss/scss/user.scss';

4. 将工程跑起来然后查看页面

注意：网上的一些教程都要去node\_modules中找react-scripe中的文件进行配置。这边我是用的是最新的脚手架，没有做其他的配置，如果配置不成功有可能是脚手架版本的问题。

# **create-react-app版本低-create-react-app脚手架react项目scss配置** #

1.安装loader

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

2.找到 **node\_modules/react-scripts/config/webpack.config.dev.js**和**webpack.config.prod.js**文件

3.新增标记处（**webpack.config.dev.js**和**webpack.config.prod.js**配置相同）

// "file" loader makes sure those assets get served by WebpackDevServer.
              // When you `import` an asset, you get its (virtual) filename.
              // In production, they would get copied to the `build` folder.
              // This loader doesn't use a "test" so it will catch all modules
              // that fall through the other loaders.
              {
                // Exclude `js` files to keep "css" loader working as it injects
                // it's runtime that would otherwise processed through "file" loader.
                // Also exclude `html` and `json` extensions so they get processed
                // by webpacks internal loaders.
                exclude: [/\.js$/, /\.html$/, /\.json$/,/\.scss$/],
                loader: require.resolve('file-loader'),
                options: {
                  name: 'static/media/[name].[hash:8].[ext]',
                },
              },
              {
                test:/\.scss$/,
                loader:['style-loader','css-loader','sass-loader'],
              },
            ],

4,重新npm start即可调用scss语法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70][]

## [解决npm报错：Module build failed: TypeError: this.getResolve is not a function][npm_Module build failed_ TypeError_ this.getResolve is not a function] ##

**1、sass-loader的版本过高导致的编译错误，当前最高版本是8.x，需要退回到7.3.1**

**运行：**

**npm uninstall sass-loader（卸载当前版本）**

**　　　　npm install sass-loader@7.3.1 --save-dev**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70]: /images/20230531/5c04000f122d4ec3993fafb4c604eccc.png
[npm_Module build failed_ TypeError_ this.getResolve is not a function]: https://www.cnblogs.com/blucesun/p/11463426.html