时间戳

首页 > 解决方案 > 使用 webpack 合并 CSS 和 Less

css - 使用 webpack 合并 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
   }
 }
]

编辑

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

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

标签： csswebpackless

解决方案

推荐阅读