angular - 从 src/assets/导入 scss 文件到组件 scss 文件

标签 angular webpack sass angular6

我在 src/assets/ap/scss/ 中有一些 scss 文件:

src/
..app/
..assets/
....ap/
......bootstrap/
......scss/
........variable.scss
........grid.scss
........responsive.scss
........style.scss

src/assets/ap/scss/style.scss 中:

// depending on the solution, I imagine these need to be updated
@import 'src/assets/ap/scss/variable';
@import 'src/assets/ap/scss/grid';
@import 'src/assets/ap/scss/responsive';

在我的一个组件中,我想像这样导入它们:

// home.component.scss
// depending on the solution, I imagine this needs to be updated
@import './src/assets/ap/scss/style';

// home.component.ts
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: [
      '../../assets/ap/bootstrap/css/bootstrap.min.css',
      './home.component.scss'
   ]
})

angular.json 中:

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
},

...

"assets": [
  "src/favicon.ico",
  "src/assets"
],
"styles": [
  "src/styles.scss"
],

这一切都可以正常编译,但是当我加载我的页面时,scss 样式不存在。 assets 文件夹似乎没有正确链接。有什么建议吗?

最佳答案

在您的 angular.json 中,您的样式指向 "src/styles.scss" 我认为您应该改为指向“src/assets/ap/scss/style.scss”。

"styles": [
  "src/assets/ap/scss/style.scss"
],

关于angular - 从 src/assets/导入 scss 文件到组件 scss 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50591722/

相关文章:

Angular 自动完成 Material

css - webpack 可以在不复制所需文件的情况下捆绑 css/scss/less 吗?

php - Laravel Mix 为 url() 禁用文件加载器

javascript - 在 scss 文件中进行更改后,css 文件未显示更改

css - 是否可以制作构成 SVG 图像的笔画的渐变颜色

html - ngOnDestroy 不适用于手机,但适用于网站

javascript - index.js 没有做 index.ts 做的事情

html - 在异步管道中设置 img src 对象 url 时防止图像闪烁

css - webpack-hot reload - CSS 样式表不更新

css - Bourbon 的 SASS 编译器