什么是`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")来自.angular-cli.json文件的styles部分。

角-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"
],

所有这些文件都将落入webpack.config的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")
],

但装载机将只处理专用于装载机扩展。