.sass和.css或者.pcss和.css有啥区别？

Question

一般我们的webpack引入sass或者postcss都会这样配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            }
          },
          {
            loader: 'postcss-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  }
}

1、.pcss和.css有啥区别，项目中为什么后缀写成.css、.pcss、.scss、.less为什么不统一呢，比如就全部使用.css
2、我在.css中可以同时用postcss语法或者用sass语法吗？比如嵌套，postcss 是

header{
    & .title{}
}

而在sass中是：

header{
    .title{}
}

Answer 1

正解答案应该是：
.sass只能用sass的语法，.pcss只能用postcss的语法，.css只能用通用css语法结构，所以可以通过sass-loader把.sass转换成.css，通过postcss-loader转换成.css

Answer 2

.css是前端三驾马车css的专用文件，是浏览器认识的文件。

而sass、less都是css的预处理语言，他们使用的文件就是.sass、.scss、.less等，这些文件浏览器并不认识。

css和less等的关系就像ts之于js，是有本质区别的，但是sass、less作为css的预处理语言为什么不统一呢？这个我不知道，就想为什么react和vue和angular为什么不统一呢？可能是利益，可能是对技术的追求。

不可以在css中写less等语法。

Answer 3

不同的预处理器 每个都是不同的工具 方便编码工作罢了，最后都会归源在.CSS上，硬要看区别，就了解一下每个的工作原理、使用方式，其他没什么区别。