Ошибка компиляции однофайлового компонента Vue.js с блоком scss с использованием пользовательской конфигурации webpack - PullRequest
Новая
       25

Ошибка компиляции однофайлового компонента Vue.js с блоком scss с использованием пользовательской конфигурации webpack

4 голосов
/ 20 июня 2019

Я сталкиваюсь с ошибкой при попытке настроить scss в проекте vue с использованием однофайловых компонентов.В настоящее время я сталкиваюсь с этой ошибкой, когда пытаюсь использовать блок <style lang="scss">, но в противном случае мой проект работает должным образом. 

ERROR in ./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js??ref--4-2!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

<template>
^
      Invalid operator in attribute selector for object
      in C:\Users\yanch\OneDrive\Desktop\virtualenvs\agg_site\client\src\App.vue (line 1, column 2)
 @ ./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js??ref--4-2!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&) 4:14-279
 @ ./src/App.vue?vue&type=style&index=0&lang=scss&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js

Я не эксперт, но эта ошибка заставляет меня думать, что существует проблемас моими правилами vue-loader.Кажется, что он пытается скомпилировать шаблон как блок стиля (хотя я могу ошибаться).Это мой конфиг веб-пакета: 

const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');

module.exports = {
    entry: './src/main.js',
    module: {
        rules: [
            { test: /\.js$/, use: 'babel-loader'},
            { test: /\.vue$/, use: 'vue-loader'},
            { test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
            { test: /\.(png|jpg|gif)$/, use: 'file-loader' },
            { test: /\.scss$/, use: ['vue-style-loader','css-loader', 'sass-loader']},
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
        new VueLoaderPlugin(),
    ],  
    devServer: {
        historyApiFallback: true,
    },
    resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
          '~': path.resolve(__dirname, './src/style'),
        }
    },
};

И у меня установлены следующие пакеты: 

"devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "axios": "^0.18.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-root-import": "^6.1.0",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.12.0",
    "path": "^0.12.7",
    "rimraf": "^2.6.3",
    "sass-loader": "^7.1.0",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.10",
    "vuex": "^3.1.0",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.14"
  },

Я выполнил инструкции по настройке vue-loader и считаю, что у меня установлены все необходимые загрузчикис правильными правилами, поэтому я не уверен, почему я получаю эту ошибку.Буду признателен за любую помощь.

** Редактировать - добавлен App.vue ниже: 

<template>
    <div id="app-container">
        <NavBanner class="nav-banner"/>
        <ProfileBanner/>
        <router-view></router-view>
    </div>
</template>

<script>
    import ProfileBanner from '@/components/ProfileBanner.vue';
    import NavBanner from '@/components/NavBanner.vue';

    export default {
        data() {
            return {
                message: 'Welcome to Leddit',

            };
        },
        components: {
            ProfileBanner,
            NavBanner,
        }
    };
</script>

<style lang="scss">
#app-container {
    font-family: 'Roboto', sans-serif;
    color: blue;
    height: 100%;
    width: 100%;
}

.nav-banner {
    height: 10%;
}
</style>
...