本教程操作环境：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写的样式。
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？的详细内容，更多请关注其它相关文章！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
