Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader

Question

Sono appena iniziato con Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader e sono un po ' perduto.

Quello che mi piacerebbe fare è usare la versione SASS del bootstrap con il mio codice SPA Vue.js. Voglio farlo in modo che le personalizzazioni del bootstrap possano essere eseguite usando SASS. Ecco cosa ho fatto:

• Creato un nuovo progetto Vue.js + webpack con vue-cli.
• Installato bootstrap-sass e sass-loader.

• aggiunto il seguente per costruire/webpack.base.conf.js:

  { test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] }, 
  { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url', query: { limit: 10000 } } 
  

• Creato src/style.scss con una riga: @import 'bootstrap';

• Aggiunto questa linea alla parte superiore della src/main.js: import './style.scss'

Quando ora corro npm run dev ottengo il seguente errore:

ERROR in ./src/main.js 
Module not found: Error: Cannot resolve module 'style' in Users/rstuart/Workspace/javascript/kapiche-demo/src 
@ ./src/main.js 3:0-25 

Non so perché questo non funziona.

Inoltre, in relazione a questa domanda, come faccio ad accedere alle variabili Bootstrap SASS all'interno dei miei componenti Vue? Se capisco cosa sta succedendo qui, il SASS verrà compilato in CSS prima di essere incluso in linea in main.js, il che significa che non c'è accesso a nessuna variabile Bootstrap nei miei componenti. C'è un modo per ottenere questo?

Answer 1

Sta cercando di risolvere il modulo di style specificato come un loader in questa sezione del tuo webpack.base.conf.js:

{ test: /\.scss$/, loaders: [ **'style'**, 'css', 'sass' ] }

Dato che avete un css e sass caricatore, che è probabilmente una voce errata che puoi rimuovere per farti andare.

Answer 2

Sono riuscito a risolvere da solo questo problema. Invece di cercare di importare direttamente style.scss, ho cancellato il file del tutto e ho sostituito l'elemento <style> della App.vue con il seguente:

<style lang="sass"> 
    $icon-font-path: "../node_modules/bootstrap-sass/assets/fonts/bootstrap/"; 
    @import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap'; 

    .wrapper { 
     margin-top: $navbar-height; 
    } 
    </style> 

Questo ha il vantaggio di rendere variabili Bootstrap disponibili nel blocco stile di componenti Vue. Inoltre, ho rimosso { test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] } da webpacker.base.conf.js interamente ma ho mantenuto il bit che trattava con i caratteri. Il caricatore per i file .vue si occupa già di sass.

Answer 3

sono riuscito a lavorato nel modo giusto in questo modo:

Vue:

<style lang="sass"> 
    $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/"; 
    @import "~bootstrap-sass/assets/stylesheets/bootstrap"; 
</style> 

webpack config caricatore:

{ 
     test: /\.(png|jpg|gif|svg)$/, 
     loader: 'file-loader', 
     options: { 
     name: '[name].[ext]?[hash]' 
     } 
    }, 
    { 
     test: /\.scss$/, 
     loaders: [ 'style-loader', 'css-loader', 'sass-loader' ] 
    }, 
    { 
     test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: "url-loader?limit=10000&minetype=application/font-woff" 
    }, 
    { 
     test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: "file-loader" 
    } 

Si precisa che io uso il bootstrap-sass e non il default boostrap