@VegasChickiChicki

Почему не работает loader для стилей в компонентах .vue?

Не могу понять, почему выдает ошибку и просит подключить 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;
};


Пожалуйста помогите, не понимаю в чем дело.
  • Вопрос задан
  • 126 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
YLab Тольятти
от 80 000 до 120 000 руб.
от 60 000 до 120 000 руб.
ITigris Санкт-Петербург
от 80 000 руб.
25 авг. 2019, в 22:35
1000 руб./за проект
25 авг. 2019, в 22:10
3000 руб./за проект
25 авг. 2019, в 21:50
6000 руб./за проект