gpt4 book ai didi

Angular 2 中的 Sass 和 webpack 不工作

转载 作者:太空狗 更新时间:2023-10-29 18:34:16 25 4
gpt4 key购买 nike

我是按照sass-loader包来做的:在我的网络配置中,我有:

{
loaders: [
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]
}

在模块中,我像这样导入 scss:

 styles:  require('./home.scss') ,

Scss 文件如下所示:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

md-card {
font: 100% $font-stack;
color: $primary-color;
}

不幸的是,当我运行该应用程序时,会发生以下情况:

ERROR in ./src/app/home/home.scss
Module parse failed: C:\src\app\home\home.scss Line 1: Unexpected token :
You may need an appropriate loader to handle this file type.
| $font-stack: Helvetica, sans-serif;
| $primary-color: #333;
|
@ ./src/app/home/home.component.ts 49:20-42

我认为一切都应该没问题,当它失败时呢?

最佳答案

我推荐使用 raw-loader 将样式导入 angular2 组件:https://github.com/webpack/raw-loader

...
loaders: [
{
test: /\.scss$/,
loaders: ['raw-loader', 'sass-loader']
}
]
...

此外,styles 应该是一个数组!

...
styles: [ require('./home.scss') ],
...

另见:https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components

顺便说一句:您也可以使用 raw-loader 导入模板。

关于Angular 2 中的 Sass 和 webpack 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36859347/

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