主页 / 问题 / 1046261
Accepted
Сергей Киселёв
Asked:2020-11-15 03:34:08 +0800 CST2020-11-15 03:34:08 +0800 CST

如何组织PHPStorm、SASS和Webpack的工作，使头文件中导入的变量在其他文件中被识别？

  • 772

在主 .scss 文件中，我依次包含一个带有变量的文件和特定部分的文件。它看起来像这样：

@import 'variables'
@import 'header'
@import 'footer'

如果你没有写在每一节的开头@import 'variables'，那么 PHPStorm 将强调变量和可扩展模块的使用，因为调用时没有正确声明。

在每个部分的文件开头导入不只是使用变量，它会导入整个文件。因此，此选项不适合。此外，它打破了风格。在 SASS 的官方网站上，他们建议使用它@use，但他们也表示它的支持尚未在任何地方提供。

在开发人员引入支持之前，是否有可能以某种方式解决这个问题@use？

webpack

1 个回答

  1. Best Answer

    尝试在prependData函数中使用带有常量和 mixins 的文件注入 

    use: [
                        {
                            loader: MiniCssExtractPlugin.loader
                        },
                        {
                            loader: 'css-loader'
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: () => [autoprefixer]
                            }
                        },
                        {
                            loader: 'resolve-url-loader'
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                prependData: (loaderContext) => {
                                    const constants = fs.readFileSync('./frontend/common/constants.scss', "utf8");
                                    return constants;
                                },
                                sourceMap: true
                            }
                        }
                    ]
    • 1

相关问题