不用Angular-cli如何使styleUrls支持引入scss/less文件？

Question

如果使用 CLI 进行构建，那么你可以用 sass、less 或 stylus 来编写样式，并使用相应的扩展名（.scss、.less、.styl）把它们指定到 @Component.styleUrls 元数据中。例子如下：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

ng set defaults.styleExt scss

CLI 的构建过程会运行相关的预处理器。

但，如果不使用CLI构建的话，应该如何操作才能使styleUrls支持引入scss/less文件？

Answer 1

这个应该与是否用CLI构建没有直接关系吧

Answer 2

以前用过一种方式：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [require('./app.component.scss').toString()]
})

同时你可能需要在webpack中进行相应的配置：

module: {
    rules: [
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
          'style-loader',
          'css-loader?sourceMap',
          'postcss-loader',
          'resolve-url-loader',
          {
            loader: 'sass-loader',
            options: {
              sassLoader: {
                sourceMap: true
              }
            }
          }
        ]
      },  
   ]
}