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

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

Include scss path for server side rendering with webpack

webpack

angular-universal

angular