React项目里全局使用SCSS

我们要实现的目标是，定义的scss变量能在所有scss文件里自动引入，而无需手动引入。
首先我们需要安装craco-sass-resources-loader sass sass-loader这些依赖

npm i craco-sass-resources-loader sass sass-loader

之后在craco.config.js文件里进行配置

const cracoSassResourcesLoader = require('craco-sass-resources-loader')
const path = require('path)

module.export = {
	plugins: [
		{
			plugin: cracoSassResourcesLoader,
			options: {
				resources: path.resolve(__dirname, 'src/styles/variables.scss')
			}
		}
	]
}

如果你想实现scss模块化，craete react app是默认支持的。以下为示例

// index.module.scss

.title {
	color: red;
}

// index.tsx

import style from './index.module.scss'

export default function Index() {
	return (
	<div classname={style.title}>
		SCSS MODULE
	</div>
	)
}

• 实现css模块化一定要在样式文件名里加入module
• 通过点语法引入