个人中心
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 错误，经过一些 digging和 digging ，我能够摆脱错误。我的 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
    文章推荐： tensorflow - 我应该什么时候初始化局部变量？
    文章推荐： c - 'smart' 是如何进行 GCC 的 Tail-Call-Optimisation 的？
    文章推荐： deployment - 虚拟环境中的软件部署
    文章推荐： javascript - 在浏览器中运行 Cucumber JS
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com