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

Question

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

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"
        ]
      },