Vue-cli-3 с EQCSS - PullRequest
Новая
       16

Vue-cli-3 с EQCSS

0 голосов
/ 16 декабря 2018

Мне интересно, как настроить Vue-cli-3 с EQCSS (https://github.com/eqcss/eqcss).

Я создал проект и установил eqcss с помощью "npm install eqcss --save", пакет теперь присутствует в node_modules/ ... Мой main.js выглядит следующим образом: 

import Vue from 'vue';
import eqcss from 'eqcss';
import App from './App.vue';
import router from './router';

Vue.use(eqcss);
Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

И я попытался применить EQCSS в стандартном App.vue, используя: 

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

// eqcss
@element #nav and (min-width: 500px) {
  :self {
    color: #000;
  }
}

</style>

, что приводит меня к следующей ошибке: 

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                                          5:03:10 PM

 error  in ./src/App.vue?vue&type=style&index=0&lang=scss&

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

@element #nav and (min-width: 500px) {
       ^
      Invalid CSS after "@element": expected 1 selector or at-rule, was "#nav and (min-width"
      in /Users/david/dev/grace/src/App.vue (line 30, column 9)

 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss& 4:14-415 14:3-18:5 15:22-423
 @ ./src/App.vue?vue&type=style&index=0&lang=scss&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.19:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
...