gpt4 book ai didi

javascript - 为什么 angular cli 不包括我的组件 scss?

转载 作者:行者123 更新时间:2023-12-03 16:46:35 25 4
gpt4 key购买 nike

我在用着:

  • Angular v2.3.1
  • Angular CLI v1.0.0-beta.24
  • 节点 v6.9.2
  • 节点萨斯 v4.1.1

  • 我有一个新的 Angular CLI 项目,它不加载组件样式,尽管它们显示在 main.bundle.js 中。文件并且没有抛出路径错误(不再)。
    angular-cli.json文件有 defaults.styleExt: "scss"apps.styles: ["styles.scss","path/to/bootstrap.css"] . defaults.inline for style 和 template 都是假的。

    正在加载全局和引导样式,但没有从组件加载任何样式。

    目录结构
    |- src
    |- index.html
    |- styles.scss
    |- scss
    |- _colors.scss
    |- _modals.scss
    |- _overrides.scss
    |- _utils.scss
    |- app
    |- components
    |- app-header
    |- app-header.component.ts
    |- app-header.component.html
    |- app-header.component.scss
    |- pages
    |- app-routing.module.ts
    |- app.component.ts
    |- app.module.ts

    样式.scss
    @import './scss/_colors';
    @import './scss/_overrides';
    @import './scss/_utils';
    @import './scss/_modals';

    html, body {
    width: 100%;
    height: 100%;
    font-family: 'Roboto', 'Helvetica', sans-serif;
    }

    app-root {
    display: table;
    width: 100%;
    height: 100%;
    }

    app-header.component.ts
    import {Component} from '@angular/core';

    @Component({
    selector: 'app-header',
    templateUrl: './app-header.component.html',
    styleUrls: ['./app-header.component.scss']
    })
    export class AppHeaderComponent {}

    app-header.component.scss
    @import '../../../../scss/_colors';

    :host {
    display: table-row;
    height: 1px;
    background: #FFF;
    }

    .header-stripe {
    width: 100%;
    height: 3px;
    background: $AMARANTH;
    }

    .header-content {
    padding: 5px 20px;
    width: 100%;
    position: relative;
    border-bottom: solid 1px $ALTO;
    }

    索引.html
    <!doctype html>
    <html>
    <head>
    <base href="./">
    <title>Test CLI App</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" />
    </head>
    <body>
    <app-root>Loading...</app-root>
    </body>
    </html>

    一些上下文...

    我使用 Angular2 Heroes 教程开始了这个项目。我无法让测试和其他事情“正常工作”。在我的研究过程中,我决定尝试使用 Angular CLI,因为它应该包含一个功能测试平台,并希望有其他一些好处。

    最初,我有很多关于模板和样式路径的 JS 错误,经过一些 diggingdigging ,我能够摆脱错误。我的 webpack 构建现在应该是“有效的”。

    在我的 angular-cli.json文件,我更新了 defaults.styleExt成为 scss ,并且我能够通过添加我的 styles.scss 来获得包含全局样式文件到 apps.styles .我的核心布局样式和 Bootstrap 样式现在正在应用到应用程序中。

    我的问题是由于某种原因,我的组件样式没有被加载。正如我所说,它们在我运行 ng build 后出现在 main.bundle.js 中,并且我已经确认它们在我运行 ng serve 时在 chrome 中加载的 main.bundle.js 中(不确定这些文件是否相同,因为我可以运行 ng serve 而无需先运行 ng build)。看起来好像 node-sass 正在正确解析变量。

    没用的东西:
  • 在 angular-cli.json 中,app.styles: ["app/**/*.scss"] .它说在重建时无法解析路径。
  • 在组件文件中,styleUrls: [require('./app-header.component.scss')] .引发控制台错误“ Uncaught Error :找不到模块”。在 webpackMissingModule (main.bundle.js:1152) []"
  • 在组件文件中,import componentStyles from './app-header.component.scss'然后 styles: [componentStyles] .抛出“找不到模块'./app-header.component.scss'。” build 时

  • 我很惊讶这如此复杂,我一定错过了一些愚蠢的东西。

    最佳答案

    聚会迟到了,但遇到了同样的事情。对于遇到此线程的人来说,将其作为另一种选择。

    一切都在渲染,样式如上面提到的那样编写,但实际上没有显示任何内容。

    Shadow DOM Strategies 上找到这篇文章这解决了我的问题。

    具体设置encapsulation: ViewEncapsulation.None使给定组件的样式正确显示。
    import { Component, OnInit, ViewEncapsulation } from '@angular/core';

    关于javascript - 为什么 angular cli 不包括我的组件 scss?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41470915/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com