使用reactjs和webpack的全局scs变量

Question

我正在使用reactjs和webpack，我正在尝试制作sass的全局变量，这样我就可以在任何地方使用它们，而无需导入它们。但我没有成功，我把文件添加到了webpack中，但总是遇到同样的问题。即使是stackoverflow上的另一个解决方案也不适用于我，有人能帮忙吗？

这是我的index.scs:

@import "../public/scss/variables";
@import "../public/scss/mixin";

这是我的variables.css文件：

$blueColor: #049DD6;
$darkBlueColor: #08536A;
$garyColor: #DFEFEF;
$darkGaryColor: #D5bbDE;
$pinkColor:#F05389;
$greenColor:#1DCD5A;
$redColor:#F60ELE;
$errorColor:#AAG601;

这是一个简单的login.scs，我试图访问我的一个变量，但它显示我的变量未定义：

.left-panel {
background-color: $blueColor;
}

感谢您的帮助

Answer 1

您需要使用扩展名进行导入

@import "../public/scss/variables.scss";

Answer 2

检查webpack模块规则中的加载程序选项是否正确。

{
test: [/.scss$/, /.css/],
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader')
},
use: [
{
loader: require.resolve('css-loader')
},
{
loader: require.resolve('sass-loader'),
},
{
loader: require.resolve('json-sass-mixin-loader')
},
{
loader: require.resolve('sass-resources-loader'),
options: {
resources: [
'path/to/mixins/*.scss',
'path/to/variables.scss']
}
},
{
loader: require.resolve('postcss-loader')
},
],
},
)
),
}

Answer 3

尝试使用选项的绝对路径。resources数组。示例：

resources: [
path.resolve(__dirname, './src/styles/variables.scss')
]

或

resources: [
'./src/styles/variables.scss'
]

两者都应工作