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

一般我们的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{}
}
阅读 421
评论
    3 个回答
    • 2.3k

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