收集所有SCS并通过Angular CLI或网页包生成-Angular 2+

当我执行ng serve或ng build时，我希望cli/webpack收集项目下的所有SCS并进行构建

我有一个带有SCS的组件，如下所示

src/app/page/home.ts
src/app/page/home.scss
src/app/page/home.html

@Component({
    templateUrl: 'home.html'
})

我的代码如下

src/app/page/home.ts
src/app/page/home.scss
src/app/page/home.html

@Component({
    templateUrl: 'home.html'
})

正如您所看到的，我没有添加stylesUrl，我希望通过CLI进行编译

问题的关键是：如何让CLI编译scss文件而不将它们添加到@Component{styleUrls:…}或任何地方

---

如何操作？

您可以使用节点sass、sass加载程序和原始加载程序

安装它们并保存到package.json：

然后在规则部分的webpack.common.js中：

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

最后，在组件中，您可以使用样式URL：

@Component({
  styleUrls: ['./filename.scss'],
})

---

如果您有一个新项目，请使用以下命令生成Angular CLI项目：

ng new project_name --style=scss

其余的由Angular CLI处理

如果您已经拥有该项目：

ng set defaults.styleExt scss

---

谢谢你，艾伦，但我不明白你的答案。也许问题还不清楚。问题是：我如何编译SCS而不在StyleURL或任何地方指定SCS文件。晚上好，Bogdance。感谢您的回答，但这并不是我问题的答案。Angular CLI对我们的软件包非常固执己见，因此您要么使用他的方式进行构建，要么使用您自己的构建并按照需要的方式配置Webpack。