Не удалось собрать модуль с помощью css-loader при попытке импортировать файл main.css. ⇐ CSS

[Anonymous]

Я пытаюсь использовать node и vue js в плагине WordPress. Меня беспокоит импорт файла CSS. Я пытаюсь добавить файл CSS в файл package.json. импорт файла CSS с помощью css-loader. Но я получаю следующую ошибку. Также может ли кто-нибудь объяснить, как публиковать CSS в этом случае.
package.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 `` blocks in `.vue` files
{
test: /\.js$/,
loader: 'babel-loader'
},
// this will apply to both plain `.css` files
// AND `` blocks in `.vue` files
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
}
}

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

Файл Vue



{{ content }}




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');
}
},
}


у меня возникает такая проблема:
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, но в файле конфигурации веб-пакета я упомянул vue-loader-css, и это проблема.
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}


Подробнее: https://stackoverflow.com/questions/692 ... n-css-file