包含用于使用 webpack 进行服务器端渲染的 scss 路径

Question

我正在尝试为我的 Angular 5 应用程序（最近从 Angular 4 迁移）部署 Angular Universal，但我遇到了服务器端渲染选项的问题：

ng build --aot --app 1

我在 scss 文件中的变量路径在客户端工作，但在服务器端渲染命令中不工作。我收到了bootstrap-sass 的类似错误

File to import not found or unreadable: bootstrap/variable.

将路径更改为node_modules工作包中的特定路径：

@import '~bootstrap-sass/assets/stylesheets/bootstrap/variables';

我需要修改大约 50 个包含 bootstrap/variable 的文件，但它仍然被接受。但我的代码还包含一个特定的 scss 文件，它因组件而异，如下所示：

@import 'supergazol/footer';

我可以浏览大约 50 个文件来相应地更改它的路径，但这不是很有效且耗时。有没有办法告诉 Webpack 找到正确的路径？

此路径的 Angular CLI 配置不起作用：

"stylePreprocessorOptions": {
        "includePaths": [
          "../node_modules/bootstrap-sass/assets/stylesheets",
          "../src/style/supergazol",
          "../src/style"
        ]
      },

文件夹结构：

src
    app
    assets
    environments
    style

Answer 1

试试这个，它可能会有所帮助。我认为您需要在 .angular-cli.json 文件中的两个应用程序中都有它（对于客户端和服务器应用程序）。

"stylePreprocessorOptions": {
        "includePaths": [
          "../node_modules/bootstrap-sass/assets/stylesheets",
          "/style/supergazol",
          "style"
        ]
      },