react中怎么使用sass?

本教程操作环境:windows10系统、react16.14.0版,该方法适用于所有品牌电脑。

React 中使用sass

安装依赖sass-loader和node-sass

npm install node-sass@4.14.1 sass-loader

若安装5以上版本会报错Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

解决:先卸载已安装版本npm uninstall node-sass,再npm install node-sass@4.14.1

配置webpack.config.js

路径:my-app\node_modules\react-scripts\config\webpack.config.js

{
loader: require.resolve('file-loader'),
   exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
   options: {
     name: 'static/media/[name].[hash:8].[ext]',
   },
 },
 //以下为新增内容
 {
   test: /\.scss$/,
   loaders: ['style-loader', 'css-loader', 'sass-loader']
 }

配置完成可以使用

使用scss

可以在src下使用scss

在components中新建一个btn目录,里面所放的组件是用sass写的样式。

1.png

btn.js文件:

import React, { Component } from 'react';
import './btn.scss'
 
export default class BtnCommon extends Component{
    constructor(props) {
        super(props)
 
    }
    componentWillMount() {
 
    }
 
    render() {
        return (
            <div className="btn-common">
              <button>这是btn组件</button>
            </div>
        )
    }
}

btn.scss文件:

.btn-common {
  //border: 1px red solid;
  button {
    border: none;
    background: none;
    outline: none;
    border: 1px red solid;
  }
}

在其他组件中引入btn组件。

启动项目(npm start)可以发现样式已经可以使用了。

ps作者使用的版本

   "node-sass": "^4.14.1",
    "qs": "^6.9.4",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "sass-loader": "^10.0.5"

以上就是react中怎么使用sass?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

1/1