Не могу понять, почему выдает ошибку и просит подключить loader, хотя он подключен, что я делаю не так, я не могу понять. Вот ошибка:
ERROR in ./src/components/test.vue?vue&type=style&index=0&id=e43c18bc〈=sass&scoped=true& (./node_modules/vue-loader/lib??vue-loader-options!./src/components/test.vue?vue&type=style&index=0&id=e43c18bc〈=sass&scoped=true&) 14:15
Module parse failed: Unexpected token (14:15)
File was processed with these loaders:
* ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| p
| color: red
> font-weight: bold
|
@ ./src/components/test.vue?vue&type=style&index=0&id=e43c18bc〈=sass&scoped=true& 1:0-152 1:168-171 1:173-322 1:173-322
@ ./src/components/test.vue
@ ./src/js/index.js
@ multi ./src/js/index.js ./src/scss/style.sass
Вот настройка веб пака:
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const fs = require("fs");
const { VueLoaderPlugin } = require("vue-loader");
function generateHtmlPlugins(templateDir) {
const templateFiles = fs.readdirSync(path.resolve(__dirname, templateDir));
return templateFiles.map(item => {
const parts = item.split(".");
const name = parts[0];
const extension = parts[1];
return new HtmlWebpackPlugin({
filename: `${name}.html`,
template: path.resolve(__dirname, `${templateDir}/${name}.${extension}`),
inject: true
});
});
}
const htmlPlugins = generateHtmlPlugins("./src/html");
const config = {
entry: ["./src/js/index.js", "./src/scss/style.sass"],
output: {
filename: "./js/index.js",
},
devtool: "source-map",
mode: "production",
optimization: {
minimizer: [
new TerserPlugin({
sourceMap: true,
extractComments: true
})
]
},
devServer:{
contentBase: './dist/html',
inline: true
},
module: {
rules: [
{
test: /\.(sass|scss)$/,
include: path.resolve(__dirname, "src/scss"),
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {}
},
{
loader: "css-loader",
options: {
sourceMap: true,
url: false
}
},
{
loader: "postcss-loader",
options: {
ident: "postcss",
sourceMap: true,
plugins: () => [
require("cssnano")({
preset: [
"default",
{
discardComments: {
removeAll: true
}
}
]
})
]
}
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
}
]
},
{
test: /\.html$/,
include: path.resolve(__dirname, "src/html","index.html"),
use: ["raw-loader"]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loader: {
scss: 'vue-style-loader!css-loader!sass-loader',
}
}
},
]
},
resolve:{
alias:{
'vue$': 'vue/dist/vue.js'
}
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: "./css/style.bundle.css"
}),
new CopyWebpackPlugin([
{
from: "./src/fonts",
to: "./fonts"
},
{
from: "./src/favicon",
to: "./favicon"
},
{
from: "./src/img",
to: "./img"
},
{
from: "./src/php-scripts",
to: "./php-scripts"
}
])
].concat(htmlPlugins)
};
module.exports = (env, argv) => {
if (argv.mode === "production") {
config.plugins.push(new CleanWebpackPlugin());
}
return config;
};
Пожалуйста помогите, не понимаю в чем дело.
