如何在库 angular 中使用 scss 文件创建组件

奥利维尔

我创建了一个 scss 应用程序并关联了一个库。我想在这个库中创建带有 .scss 文件的组件。但是当我在库中创建一个组件时,angular 会自动为其分配一个 css 文件。

我使用 scss 选项而不是库(polaris-common)创建了应用程序(名为 vega-libraries)

这是带有树视图的项目的屏幕截图,我尝试在 toto.scss 中更改 totoComponent 的 css 文件,如屏幕截图所示。

在此处输入图片说明

但是当我这样做时,它会产生这种类型的错误:

错误:加载程序“C:/Users/........toto/toto.component.css”没有返回字符串。

如何使用有效的 .scss 文件在我的库中创建组件?

感谢您的帮助

编辑 :

 "polaris-common": {
      "projectType": "library",
      "root": "projects/polaris-common",
      "sourceRoot": "projects/polaris-common/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "project": "projects/polaris-common/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/polaris-common/tsconfig.lib.prod.json"
            },
            "development": {
              "tsConfig": "projects/polaris-common/tsconfig.lib.json"
            }
          },
          "defaultConfiguration": "production"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/polaris-common/src/test.ts",
            "tsConfig": "projects/polaris-common/tsconfig.spec.json",
            "karmaConfig": "projects/polaris-common/karma.conf.js"
          }
        }
      }
    }
  },
  "defaultProject": "vega-libraries"
}
放克者

这是针对 Angular 12 的。在之前的版本中可能会有所不同。scss在执行时设置为默认样式格式ng create component,请在angular.json您的项目下添加schematics

"projectType": "library",
"schematics": {
    "@schematics/angular:component": {
        "style": "scss"
    },

在现有组件中,更改styleUrls以反映重命名scss文件的路径而不是css

// toto.component.ts

@Component({
  styleUrls: ['./toto.component.scss']
})

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Angular 6中使用ngModel创建自定义输入组件?

如何在Angular组件中使用枚举

如何在Angular 2中添加导入SCSS文件

如何使用ionic 2创建组件scss

如何在angular-cli项目中使用全局scss文件

如何在Rails 5.2 / Angular 5 / Webpacker中为组件包含单独的SCSS文件?

如何在Laravel中使用Scss文件

如何在.sass文件中使用angular的:host CSS选择器?(不是.scss)

如何在CodeSandbox中使用Scss文件?

如何在angular 7中使用SCSS mixins

Angular-如何使用ngc -w导入scss变量文件?

JHipster-如何使用angular 7直接编译SCSS文件

如何用Angular CLI替换SCSS文件?

如何在Angular组件中使用Bootstrap SCSS函数?

如何使用Vue组件文件保留CSS / SCSS

如何在角度组件的styles.scss中使用媒体查询?

如何在另一个 SCSS 文件的 SCSS 颜色图中使用颜色变量?

在 NativeScript 中使用 Angular 为组件特定的 .scss Sass

如何在 .vue 文件中使用来自 .scss 文件的 mixins?

如何在 create-react-app 中使用 scss 文件?

如何在 Angular 2 应用程序的 SCSS 文件中使用动态数据?

如何在没有 SCSS 文件的情况下使用 SCSS 对 div 进行样式设置对 React 组件不重要

如何在 Node/Angular/React 中使用 scss 函数

如何在输入字段中使用 scss

如何在 Angular 中使用 JavaScript 文件

如何在 Angular 中使用 JavaScript 文件

如何在scss中使用js变量?

如何在 Scss 文件中使用 @use 来访问所有文件

如何在库中使用类的方法?