Подсказка для Vuetify SassError: SassError: Invalid CSS - PullRequest
Новая
       38

Подсказка для Vuetify SassError: SassError: Invalid CSS

1 голос
/ 26 февраля 2020

У кого-нибудь эта ошибка появляется при попытке установить подсказку редактора WYSIWYG для Vuefity?

Это ошибка: 

ERROR in ./node_modules/vuetify/src/styles/main.sass (./node_modules/css-loader/dist/cjs.js??ref--4-1!./node_modules/postcss-loader/src??ref--4-2!./node_modules/sass-loader/dist/cjs.js??ref--4-3!./node_modules/vuetify/src/styles/main.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 6 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 3 of /home/fc-gui/node_modules/vuetify/src/styles/main.sass
>>     @content($material-light); }

   ----^

И тогда это мой основной Vue файл: 

/* eslint no-console: 0 */

import '@mdi/font/css/materialdesignicons.css'
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from '../app.vue'
import Vuetify from 'vuetify'
import getShop from '../api/shops'
import customizationApi from '../api/customization'
import { routes } from '../router/routes'
import store  from '../store/store'
import axios from 'axios'
import VueFriendlyIframe from 'vue-friendly-iframe';
import { TiptapVuetifyPlugin } from 'tiptap-vuetify'

Vue.use(VueFriendlyIframe)
Vue.use(Vuetify)
Vue.use(VueRouter)
Vue.use(TiptapVuetifyPlugin)

const router = new VueRouter({
  routes
});

router.beforeEach((to, from, next) => {
  if(to.name == null){
    getShop.get(
      data => {
        if(data.setup) {
          next({ name: 'emailCustomize'});
        }
        else {
          next({ name: 'plans'})
        }
      });
  }
  else {
    next();
  }
});

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    vuetify: new Vuetify(),
    router,
    store,
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)
})

И, наконец, мой package.json файл 

{
  "name": "fresh-credit",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.7",
    "animate.css": "^3.7.2",
    "axios": "^0.19.0",
    "babel-preset-stage-2": "^6.24.1",
    "chart.js": "^2.8.0",
    "lodash": "^4.17.15",
    "postcss-loader": "^3.0.0",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "tiptap-extensions": "^1.28.6",
    "tiptap-vuetify": "^2.13.2",
    "turbolinks": "^5.2.0",
    "vue": "^2.6.10",
    "vue-breadcrumbs": "^1.2.0",
    "vue-chartist": "^2.2.1",
    "vue-chartjs": "^3.4.2",
    "vue-click-outside": "^1.0.7",
    "vue-friendly-iframe": "^0.17.0",
    "vue-loader": "^15.7.1",
    "vue-router": "^3.1.3",
    "vue-template-compiler": "^2.6.10",
    "vuetify": "^2.0.18",
    "vuex": "^3.1.2"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@mdi/font": "^4.4.95",
    "deepmerge": "^4.2.2",
    "fibers": "^4.0.2",
    "sass": "^1.25.0",
    "sass-loader": "^8.0.2",
    "webpack-dev-server": "^3.8.0",
    "webpack-merge": "^4.1.0"
  }
}

Кажется, ничего не работает. Я даже взглянул на эти файлы, упомянутые в сообщении об ошибке, и не похоже, что это источник проблемы. Но для полноты вот файл _theme.sass

@mixin theme ($component)
  .theme--light.#{$component}
    @content($material-light)
  .theme--dark.#{$component}
    @content($material-dark)

1 Ответ

1 голос
/ 20 марта 2020

Добавьте это в свои правила Webpack.config. js и укажите параметры, основанные на используемой вами версии загрузчика sass 

{
  test: /\.s(c|a)ss$/,
  use: [
    'vue-style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      // Requires sass-loader@^7.0.0
      options: {
        implementation: require('sass'),
        fiber: require('fibers'),
        indentedSyntax: true // optional
      },
      // Requires sass-loader@^8.0.0
      options: {
        implementation: require('sass'),
        sassOptions: {
          fiber: require('fibers'),
          indentedSyntax: true // optional
        },
      },
    },

И убедитесь, что вы используете sass вместо node-sass в вашей упаковке. json. Исходя из своего опыта, я обнаружил, что если у вас ранее был установлен node-sass, вы можете удалить модули узлов и повторно запустить npm install

Вы также можете установить vue -style-loader и css -загрузчик, поскольку я не вижу их в вашем пакете. json

Более подробную информацию можно найти по этим ссылкам

...