element ui plus样式webpack编译报错？

Question

问题描述

我引入elementui的css就报错了：import 'element-plus/dist/index.css'

import { createApp } from "vue"
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'  // 这里
import App from "./App.vue"
import router from "./router"
import './styles/common.less'

const app=createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount("#app")

这是我的配置

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const { VueLoaderPlugin } = require("vue-loader")

module.exports = {
   entry: path.resolve(__dirname, "..", "./src/main.js"),
   output: {
      path: path.resolve(__dirname, "..", "./dist"),
      filename: "bundle.[name]-[hash].js",
   },
   plugins: [
      new VueLoaderPlugin(),
      new HtmlWebpackPlugin({
         template: path.resolve(__dirname, "..", "./public/index.html"),
      }),
   ],
   module: {
      rules: [
         { test: /.vue$/, use: "vue-loader" },
         {
            test: /\.(css|less)$/,
            use: ["style-loader","css-loader","less-loader"],
         },
         {
            test: /\.m?js$/,
            use: {
               loader: "babel-loader",
               options: {
                  presets: ["@babel/preset-env"],
               },
            },
         },
         {
            test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
            type: "asset/resource",
         },
         {
            test: /\.(woff(2)?|eot|ttf|otf|svg)$/,
            type: "asset/inline",
         },
      ],
   },
}

解决方案

 {
    test: /.css$/,
    use: ["style-loader", "css-loader"],
 },
 {
    test: /.less$/,
    use: ["style-loader", "css-loader", "less-loader"],
 },

Answer 1

把 test:/\.(css|less)$/ 拆封分 css 和 less 两项就好了。不要合并在一起处理。