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

Question

我經歷了角的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文件。

角CLI爲您提供4個選項爲構建CSS

1）CSS

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

2）上海社會科學院

"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部分的webpack.config（如果你沒有運行ng eject否則你必須將它自己添加）

"include": [ 
    path.join(process.cwd(), "src\\styles.css"), 
    path.join(process.cwd(), "src\\main.less"), 
    path.join(process.cwd(), "src\\common.styl") 
], 

但裝載機將僅處理專用裝載機exstension。