Angular 2 AOT Webpack CSS 相对嵌套 url

Posted 2023-03-13

【中文标题】Angular 2 AOT Webpack CSS 相对嵌套 url

【英文标题】：Angular 2 AOT Webpack CSS relative nested url

【发布时间】：2017-06-01 10:34:18

【问题描述】：

我在我的项目中使用Material-Design-Icons，并将它的 css 导入到我自己的 css 文件中。

这样做是这样的：

app.component.css

@import "../node_modules/mdi/css/materialdesignicons.min.css";

materialdesignicons.css

@font-face 
  font-family: "Material Design Icons";
  src: url("../fonts/materialdesignicons-webfont.eot?v=1.7.22");
  src: url("../fonts/materialdesignicons-webfont.eot?#iefix&v=1.7.22") format("embedded-opentype"), url("../fonts/materialdesignicons-webfont.woff2?v=1.7.22") format("woff2"), url("../fonts/materialdesignicons-webfont.woff?v=1.7.22") format("woff"), url("../fonts/materialdesignicons-webfont.ttf?v=1.7.22") format("truetype"), url("../fonts/materialdesignicons-webfont.svg?v=1.7.22#materialdesigniconsregular") format("svg");
  font-weight: normal;
  font-style: normal;

现在，初始导入（来自app.component.css）和嵌套导入（materialdesignicons.css）可以在webpack-dev-server 上与to-string-loader!css-loader 一起正常工作

但是，使用 Angular 2 编译器 CLI 将无法导入嵌套的 url（字体）。

当我看到项目正在尝试获取相对于主 css 文件 (app.component.css) 的字体时，我收到 404 错误。

Webpack.common.config.js（加载器）

loaders: [
        
            test: /\.ts$/,
            loaders: [
                'awesome-typescript-loader',
                'angular2-template-loader',
                'angular2-router-loader'
            ]
        ,
        
            test: /\.html$/,
            loader: 'html'
        ,
        
            test: /\.css$/,
            loaders: [
                'to-string',
                'css'
            ]
        ,
        
            test: /\.(eot|svg|ttf|woff|woff2)$/,
            loader: 'file?name=[path][name].[ext]'
        
    ]

【参考方案1】：

好的，我为我的情况找到了替代方案：

使用 CDN 链接，因此相对路径在云端处理。

我使用的链接：https://cdn.materialdesignicons.com/1.7.22/css/materialdesignicons.min.css

希望这对任何人都有帮助，我仍然想知道为什么我不能在 AOT 编译中进行嵌套相对导入。