0

一般我们的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{}
}
Awbeci 2.1k
11月22日提问
3 个回答
0

已采纳

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

0

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

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

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

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

0

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

撰写答案

推广链接