Question

我正在浏览angular-cli的webpack配置，并为css相关的加载器找到了以下规则：

{
    "include": [
        path.join(process.cwd(), "src\\styles.css")
    ],
    "test": /\.scss$|\.sass$/,
    "use": [...]
},
{
    "include": [
        path.join(process.cwd(), "src\\styles.css")
    ],
    "test": /\.less$/,
    "use": [...]
}

如果我的理解正确，则这些文件应与以下文件styles.css.less和styles.css.scss匹配。这是什么类型的文件，或者我错过了什么？

我知道什么是sass，少知道文件。但我从来没有看到扩展名为css.less或css.scss但似乎扩展应该是为装载机匹配。

Answer 1

path.join(process.cwd(), "src\\styles.css")来自styles文件的.angular-cli.json部分。

Angular-cli为您提供4种构建css的选项

1）css

"include": [
  path.join(process.cwd(), "src\\styles.css")
],
"test": /\.css$/,

2）sass

"include": [
  path.join(process.cwd(), "src\\styles.css")
],
"test": /\.scss$|\.sass$/,

3）少

"include": [
  path.join(process.cwd(), "src\\styles.css")
],
"test": /\.less$/,

4）手写笔

"include": [
  path.join(process.cwd(), "src\\styles.css")
],
"test": /\.styl$/,

您可以将所需的样式文件添加到json

"styles": [
   "styles.css",
   "main.less",
   "common.styl"
],

并且所有这些文件都会落入include的{{1}}部分（如果您没有运行webpack.config，则必须自行添加）

ng eject

但是加载程序将仅处理专用于加载器exstension。

什么是`styles.css.less`和`styles.css.scss`文件

1 个答案: