Question

创建新项目并将其升级到webpack版本后，我想添加bootstrap的CSS。

我尝试了在docs [1]中描述的方法，但它似乎不起作用。

我无法使用cdn版本，因为我的用户可能无需访问外部网络即可工作。

[1] https://github.com/angular/angular-cli#global-library-installation

"apps": [
    {
      "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.css"
      ],
...

$ ng --version
angular-cli: 1.0.0-beta.11-webpack.2
node: 5.4.1
os: linux x64

或许我只是不明白应该发生什么？在ng build目录中的dist之后，没有CSS文件，并且没有任何内容添加到index.html

Answer 1

我认为你必须在node_modules的前面添加../，因为node_modules文件夹在目录树中是一步。像这样： “../ node_modules /引导/ DIST / CSS / bootstrap.css”

Answer 2

如果升级到1.0.0-beta.11-webpack.3或更高版本，则可以使用apps[0].styles的{{1}}属性列出要导入的外部样式表。有了这个，您不必向angular-cli.json添加任何内容。

要从index.html升级到1.0.0-beta.11-webpack.2，请运行：

1.0.0-beta.11-webpack.3

注意：如果在运行npm uninstall -g angular-cli npm cache clean npm install -g angular-cli@1.0.0-beta.11-webpack.3时出现SyntaxError: Unexpected token ...错误，则可能需要升级到Node.js 6。有关详细信息，请参阅https://github.com/angular/angular-cli/issues/1883。

如果您生成一个新项目并安装Bootstrap，那么您的ng version应如下所示：

angular-cli.json

Answer 3

apps[0].styles期间来自angular-cli.json的{{1}}属性的所有css文件都会编译为styles.bundle.js，此文件包含在ng build中。如果您检查此文件，您可以找到所有样式。所以它按预期工作。

如何将css库添加到使用angular-cli @ webpack生成的项目中

3 个答案: