【React】react中如何引用全局scss文件中定义的变量以及函数

Z时代
2024-01-10
分类：技术分享

我的react项目样式结构是这样的：

在项目的根目录有一个全局的scss文件style.scss，里面定义了公共样式和变量、函数

然后，每个组件都有单独的一个局部样式

style.scss：

$color: darksalmon;
.text-center{
text-align: center;}

default.scss：

.outer{
background-color: #0088cc;
@extend .text-center;//报错
.inner{
color: $color;//报错
}}

现在出现的情况是：我在项目入口文件index.js引入了style.scss，然后在任意的jsx里面用className引入全局scss文件中的样式没问题，但如果我在局部scss文件中想用@extend去继承全局scss文件中的样式，或者引用全局scss文件的变量、函数均报错，报错说找不到相关样式、变量。

请问该如何配置，局部scss文件可以引用全局scss文件中的变量以及函数？

另外，我配置了css模块化，相关webpack配置如下:

 module:{
rules:[
{
test: /\.scss$/,
exclude: path.resolve(__dirname,'./style.scss'),
use: extractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: "[path][name]-[local]-[hash:base64:5]",
sourceMap: true,
}
},
{
loader: 'resolve-url-loader',
},
{
loader: 'sass-loader'
}
]
})
},
{
test: /\.scss$/,
include: path.resolve(__dirname,'./style.scss'),
use: extractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
}
},
{
loader: 'resolve-url-loader',
},
{
loader: 'sass-loader'
}
]
})
}
]}