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

【问题标题】：What are `styles.css.less` and `styles.css.scss` files什么是 `styles.css.less` 和 `styles.css.scss` 文件
【发布时间】：2018-01-08 08:40:09
【问题描述】：

我正在通过 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 和 less 文件。 但我从未见过扩展名是 css.less 或 css.scss 但似乎这正是加载程序的扩展名匹配。

【问题讨论】：

标签： css angular webpack sass less

【解决方案1】：

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

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

所有这些文件都将落入您的webpack.config 的include 部分（如果您没有运行ng eject，否则您必须自己添加）

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

但加载器将只处理加载器扩展专用。

【讨论】：