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

Hx2heng
  • 23

如果使用 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文件?

回复
阅读 2.7k
2 个回答

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

以前用过一种方式:

@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
              }
            }
          }
        ]
      },  
   ]
}
宣传栏