Vue.js - Неверный CSS после - PullRequest
       0

Vue.js - Неверный CSS после

0 голосов
/ 17 января 2019

Я пытаюсь скомпилировать интерфейсное приложение на основе Vue.js, но каждый раз, когда я пытаюсь его запустить, я получаю следующее сообщение об ошибке:

Module build failed (from ./node_modules/sass-loader/lib/loader.js):


^
      Invalid CSS after "": expected 1 selector or at-rule, was "import './ProjectM"
      in /app/src/components/ProjectMenuButton/ProjectMenuButton.vue (line 1, column 1)

Раньше я видел эту ошибку раньше, когда включал файлы .css с неверным путем доставки.

Проблема в том, что буквально не было ни одного файла .css, включенного в этот файл:

/ приложение / SRC / компоненты / ProjectMenuButton / ProjectMenuButton.vue:

<template>

  <button :class="buttonClass" @click="changed()">
  <h3>{{ this.ProjectMenuButton.text }}</h3>
  </button>
</template>



<script>
export default {
  name: "ProjectMenuButton",
  props: {
    ProjectMenuButton: {
      type: Object,
      default: () => ({
        id: '',
        text: '',
        page: '',
        class: 'btn'
      })
    },
    ProjectMenuButtonClass: {
      type: Object,
      default: () => ({
        class: ''
      })
    }
  },
    computed: {
      buttonClass() {
        if(typeof this.ProjectMenuButtonClass.class === undefined 
          || this.ProjectMenuButtonClass.class === undefined)
            return `ui basic button menu-button`;
          else
            return `ui basic button menu-button ${this.ProjectMenuButtonClass.class}`;
      },
  },
  methods: {
    changed: function(event) {
      store.commit('current_menu', this.ProjectMenuButton.page);
    }
  }
};
</script>

Я пробовал разные команды, например:

npm install --save-dev webpack

npm перестроить node-sass

Но ничего из вышеперечисленного не сработало.

Более того, я запускаю Vue.js со следующей конфигурацией docker-container:

frontend:
    image: node:10-alpine
    command: npm run serve
    volumes:
      - ./.env:/app/.env:ro
      - ./frontend:/app
    working_dir: /app
    restart: on-failure

  postgres:
    image: postgres:10-alpine
    volumes:
      - postgres_data:/var/lib/postgresql/data
    env_file: .env

package.json:

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "npm i && vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "register-service-worker": "^1.5.2",
    "vue": "^2.5.17",
    "vue-router": "^3.0.1",
    "vue-raven": "^1.0.0",
    "vue-analytics": "^5.16.0",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.1",
    "@vue/cli-plugin-eslint": "^3.0.1",
    "@vue/cli-plugin-pwa": "^3.0.1",
    "@vue/cli-plugin-unit-jest": "^3.0.1",
    "@vue/cli-service": "^3.0.1",
    "@vue/eslint-config-standard": "^3.0.1",
    "@vue/test-utils": "^1.0.0-beta.24",
    "babel-core": "^6.26.3",
    "babel-jest": "^23.4.2",
    "node-sass": "^4.9.3",
    "sass-loader": "^7.1.0",
    "vue-template-compiler": "^2.5.17"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "jest": {
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json",
      "vue"
    ],
    "transform": {
      "^.+\\.vue$": "vue-jest",
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
      "^.+\\.jsx?$": "babel-jest"
    },
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    },
    "snapshotSerializers": [
      "jest-serializer-vue"
    ],
    "testMatch": [
      "<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))"
    ]
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...