Question

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

我有一个scss组件，如下所示

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：...}）或任何地方。

我该怎么做？

Answer 1

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

function x(input, caller) {
  return input.replace(caller === 'console' ? /\\/g : /\\\\/g, "\\");
}

console.log(x('["\\\\\\\"\\"a\\""]', "console"));

$("button").click(function() {
  console.log(x($("input").val()));
});

Angular CLI将处理剩下的事情。

如果您已经拥有该项目：

ng new project_name --style=scss

Answer 2

您可以使用node-sass，sass-loader和raw-loader。

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

npm install node-sass sass-loader raw-loader --save-dev

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

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

最后在组件中，您可以使用styleUrls：

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

通过Angular CLI或webpack收集所有scss并构建 - Angular 2+

2 个答案: