将CSS和Less与网页包合并

如何通过webpack合并CSS和LESS，以及我需要哪些额外的节点模块

我是否需要两个不同的输入文件，一个用于LESS，另一个用于CSS？如果是这样，最好的方法是什么

在.less文件中导入.css文件时会出现问题

CSS

test: /\.css$/,
exclude: [/node_modules/, /public/],
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {}
    },
    {
      loader: 'css-loader',
      options: {
        sourceMap: true
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        sourceMap: true,
        plugins: [
          autoprefixer({
            browsers: ['>2%', 'last 4 versions', 'Firefox ESR', 'not ie < 9']
          }),
          postcssPresetEnv(),
          PostcssClean({
            sourceMap: true,
            level: 1
          })
        ]
      }
    }
  ]

test: /\.less$/,
exclude: [/node_modules/, /public/],
use: [
  MiniCssExtractPlugin.loader,
  {
    loader: 'css-loader',
    options: {
      sourceMap: true
    }
  },
  {
    loader: 'postcss-loader',
    options: {
      sourceMap: true,
      plugins: [
        autoprefixer({
          browsers: ['>2%', 'last 4 versions', 'Firefox ESR', 'not ie < 9']
        }),
        postcssPresetEnv(),
        PostcssClean({
          sourceMap: true,
          level: 1
        })
      ]
    }
  },
  {
    loader: 'less-loader',
   options: {
     sourceMap: true
   }
 }
]

test:/\.css$/，
排除：[/node_modules/，/public/]，
使用：[
{
加载器：MiniCssExtractPlugin.loader，
选项：{}
},
{
加载器：“css加载器”，
选项：{
sourceMap:true
}
},
{
加载器：“postss加载器”，
选项：{
sourceMap:true，
插件：[
自动刷新器({
浏览器：['>2%，'last 4 versions'，'Firefox ESR'，'not ie<9']
}),
postssspresetenv（），
后清洁({
sourceMap:true，
级别：1
})
]
}
}
]

更少

test: /\.css$/,
exclude: [/node_modules/, /public/],
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {}
    },
    {
      loader: 'css-loader',
      options: {
        sourceMap: true
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        sourceMap: true,
        plugins: [
          autoprefixer({
            browsers: ['>2%', 'last 4 versions', 'Firefox ESR', 'not ie < 9']
          }),
          postcssPresetEnv(),
          PostcssClean({
            sourceMap: true,
            level: 1
          })
        ]
      }
    }
  ]

test: /\.less$/,
exclude: [/node_modules/, /public/],
use: [
  MiniCssExtractPlugin.loader,
  {
    loader: 'css-loader',
    options: {
      sourceMap: true
    }
  },
  {
    loader: 'postcss-loader',
    options: {
      sourceMap: true,
      plugins: [
        autoprefixer({
          browsers: ['>2%', 'last 4 versions', 'Firefox ESR', 'not ie < 9']
        }),
        postcssPresetEnv(),
        PostcssClean({
          sourceMap: true,
          level: 1
        })
      ]
    }
  },
  {
    loader: 'less-loader',
   options: {
     sourceMap: true
   }
 }
]

test:/\.减去$/，
排除：[/node_modules/，/public/]，
使用：[
MiniCssExtractPlugin.loader，
{
加载器：“css加载器”，
选项：{
sourceMap:true
}
},
{
加载器：“postss加载器”，
选项：{
sourceMap:true，
插件：[
自动刷新器({
浏览器：['>2%，'last 4 versions'，'Firefox ESR'，'not ie<9']
}),
postssspresetenv（），
后清洁({
sourceMap:true，
级别：1
})
]
}
},
{
加载器：“更少的加载器”，
选项：{
sourceMap:true
}
}
]

编辑 解决方案是定义两个不同的入口点，然后分别处理CSS和更少的CSS

---

使用SASS加载程序，@Pete的（查看评论）解决方案似乎是最好的。只需让CSS和SAS由同一个加载程序处理。

您能不能将CSS文件更改为更少？或者做一些类似于

test://\（css | less）$/，

@Pete-hehe的事情，这个主意很聪明，但我已经找到了解决方案。你需要，非常简单，两个不同的输入文件和一切工作。因此，您必须处理CSS，而不是彼此分开处理。适用于autoprefixer等。

test://\（css | less）$/，

会导致错误，因为less加载程序会尝试处理cssweird-我们使用sass，并且能够使用此配置处理sass和css：