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