在使用相对路径时，VSCode中找不到CSS/SCSS代码模块。

Question

我正在使用VS Code编写SharePoint Framework网络部件。

不幸的是，我的scss样式文件无法找到，尽管它与同一路径下 - 请参见下面的图片：

我还检查了样式文件Events.module.scss，以防止导入时出现错误，但该文件没有问题...

我已尝试重新启动VS Code...尝试移动文件，尝试重命名scss文件...

那么这里缺少什么，我该如何解决？

- Our Man in Bananas

---

尝试刷新项目文件夹结构，重新启动VSCode。 - lifetimeLearner007

可能会有所帮助 https://github.com/s-panferov/awesome-typescript-loader/issues/146 - Priyesh Kumar

@PriyeshKumar：谢谢，当我将错误行更改为const styles = require('./Events.module.scss');时它能正常工作，但是我得到一个建议：将“require”转换为“import”，这很烦人。 - Our Man in Bananas

我在如何在TypeScript和Webpack中使用CSS模块中找到了解决方案，虽然有点繁琐但确实可行。 - Our Man in Bananas

Answer 1

我在如何使用TypeScript和webpack使用CSS模块中找到了解决方案。

我们可以通过使用const s = require('./Button.css');来绕过导入。

或者，像这样安装CSS模块的Typings:

npm install --save-dev typings-for-css-modules-loader

然后将新规则添加到 webpack.config 中：

module: {
  rules: [
    {
      test: /\.css$/,
      include: path.join(__dirname, 'src/components'),
      use: [
        'style-loader',
        {
          loader: 'typings-for-css-modules-loader',
          options: {
            modules: true,
            namedExport: true
          }
        }
      ]
    }
  ]
}

虽然有些烦琐或混乱，但这是可能的。

- Our Man in Bananas