it-swarm.com.de

Verwenden Sie benutzerdefiniertes SCSS mit Bootstrap-Vue + Webpack + Vue.js

Ich erstelle eine Anwendung mit VueJS mit Bootstrap-Vue. Ich versuche, eine SCSS-Datei zu importieren, um die Bootstrap-Variablen sowie eine andere SCSS-Datei für benutzerdefinierte Stile zu überschreiben.

Folgendes habe ich bisher:

  • Installierter Node-Sass, Sass-Loader und CSS-Loader

npm install node-sass sass-loader css-loader --save-dev

  • Folgendes wurde zu build/webpack.base.conf.js hinzugefügt

{ test:/\.(s*)css$/, use:['style-loader','css-loader', 'sass-loader']}

  • Erstellt eine SCSS-Datei in src/assets/scss/app.scss

main.js

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
import fontawesome from '@fortawesome/fontawesome'
import light from '@fortawesome/fontawesome-pro-light'

Vue.use(BootstrapVue)

Vue.config.productionTip = false

fontawesome.library.add(light)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

<style lang="scss">
  @import './assets/scss/app.scss';
</style>

Wenn ich npm run dev ausführe, wird folgende Fehlermeldung angezeigt:

ERROR  Failed to compile with 1 errors                                                      21:05:54

 error  in ./src/main.js

Syntax Error: Unexpected token, expected ; (29:7)

  27 | })
  28 |
> 29 | <style lang="scss">
     |        ^
  30 |   @import './assets/scss/app.scss';
  31 | </style>
  32 |



 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

    fontawesome.library.add(light)

    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })

    <style lang="scss">
      @import './assets/scss/app.scss';
    </style>

Ich bin nicht sicher, warum es nicht funktioniert. Ich habe verschiedene Lösungen für Github und Stack Overflow ausprobiert.

Jede Hilfe wäre dankbar.

3
Kumaran S

Sie können kein Style-Tag in einem solchen Javascript schreiben. Sie müssen es entweder in eine vue-Datei verschieben und einen Loader anhängen oder einen Standardimport verwenden:

import './assets/scss/app.scss';

Ohne die Tags style oder das Symbol @.

0
Ohgodwhy