尝试导入 main.css 文件时，使用 css-loader 构建模块失败

Question

我正在尝试在 wordpress 插件中使用 node 和 vue js。我对 css 文件导入感到震惊。我正在尝试将 css 文件添加到 package.json 文件中。 使用 css-loader 导入 css 文件。 但我收到以下错误。 任何人都可以解释如何在这种情况下发布 css。

包.json

    {
  "name": "plugin_toolkit",
  "version": "1.0.0",
  "description": "Simple WordPress plugin that uses Webpack.",
  "main": "index.js",
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  },
  "scripts": {
    "dev": "webpack --mode=development --watch --config webpack-config.js",
    "build": "webpack --mode=production --config webpack-config.js"
  },
  "keywords": [
    "wordpress",
    "webpack",
    "javascript"
  ],
  "author": "Srinitamil",
  "license": "GPL-2.0+",
  "devDependencies": {
    "@babel/cli": "^7.1.5",
    "@babel/core": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
    "axios": "^0.21.1",
    "babel-loader": "^8.0.4",
    "lodash": "^4.17.11",
    "vue-loader": "15.9.8",
    "vuex": "^3.6.2",
    "css-loader": "^6.2.0",
    "webpack": "^4.26.1",
    "webpack-cli": "^3.1.2",
    "vue-template-compiler": "^2.6.12"
  },
  "dependencies": {
    "vue": "^2.6.14"
  }
}

网络包配置文件

// Require path.
const path = require( 'path' );
const { VueLoaderPlugin } = require('vue-loader')


// Configuration object.
const config = {
    // Create the entry points.
    // One for frontend and one for the admin area.
    entry: {
        // frontend and admin will replace the [name] portion of the output config below.
        frontend: './src/front/main.js',
        admin: './src/admin/admin-index.js',

    },

    plugins: [
        // make sure to include the plugin!
        new VueLoaderPlugin()
    ],

    // Create the output files.
    // One for each of our entry points.
    output: {
        // [name] allows for the entry object keys to be used as file names.
        filename: 'js/[name].js',
        // Specify the path to the JS files.
        path: path.resolve( __dirname, 'assets' )
    },

    // Setup a loader to transpile down the latest and great JavaScript so older browsers
    // can understand it.
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            // this will apply to both plain `.js` files
            // AND `<script>` blocks in `.vue` files
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            // this will apply to both plain `.css` files
            // AND `<style>` blocks in `.vue` files
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            }
        ]
    }
}

// Export the config object.
module.exports = config;

Vue文件

<template>
  <div>
    <app></app>
    <h1> {{ content }} </h1>
  </div>
</template>

<script>
import vue from 'vue';
import app from '../App.vue';
import '../main.css';

export default {
  name: 'Home',
  components: {
    app,
  },
  data() {
    return {
      content: 'tests',
    }
  },
  mounted() {
    this.callthis();
  },
  methods() {
    callthis()
    {
      console.log('saf');
    }
  },
}
</script>

我遇到了类似的问题

ERROR in ./src/front/main.css (./node_modules/css-loader/dist/cjs.js!./src/front/main.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (/opt/lampp/htdocs/vblog/wp-content/plugins/plugin-toolkit/node_modules/css-loader/dist/index.js:31:27)
 @ ./src/front/main.css 4:14-79
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/front/templates/Home.vue?vue&type=script&lang=js&
 @ ./src/front/templates/Home.vue?vue&type=script&lang=js&
 @ ./src/front/templates/Home.vue
 @ ./src/front/main.js

---

我使用的是普通的 css 文件，但在 webpack 配置文件中，我提到了 vue-loader-css 这就是问题所在。

{
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
}

Answer 1

我认为这是版本不兼容的问题。 您可以尝试以下 css-loader 版本

“css-loader”：“4.3.0”