javascript - template - install bootstrap in vue js

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

Question

Estoy empezando con Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader y estoy un poco perdido.

Lo que me gustaría hacer es usar la versión SASS de bootstrap con mi código SPA Vue.js. Quiero hacer esto para que mi personalización de bootstrap pueda hacerse usando SASS. Esto es lo que hice:

• Creó un nuevo proyecto de paquete web Vue.js + con vue-cli.
• Instalado bootstrap-sass y sass-loader.

• Se agregó lo siguiente a build / webpack.base.conf.js:

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

• Creado src / style.scss con una línea: @import ''bootstrap'';

• Se agregó esta línea a la parte superior de src / main.js: import ''./style.scss''

Cuando ahora ejecuto npm run dev obtengo el siguiente error:

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

No estoy seguro de por qué esto no está funcionando.

Además, en relación con esta pregunta, ¿cómo puedo obtener acceso a las variables Bootstrap SASS dentro de mis componentes Vue? Si entiendo lo que está sucediendo aquí, el SASS se compilará en CSS antes de ser incluido en línea en main.js, lo que significa que no hay acceso a ninguna variable de Bootstrap en mis componentes. ¿Hay una manera de lograr esto?

Answer 1

Me las arreglé para trabajar de la manera correcta de esta manera:

Vue:

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

cargador de configuración de webpack:

    {
      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" 
    }

Tenga en cuenta que uso el bootstrap-sass y no el boostrap predeterminado

Answer 2

Está intentando resolver el módulo de style que especificó como cargador en esta sección de su webpack.base.conf.js:

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

Dado que tiene un cargador css y sass, es probable que sea una entrada errónea que puede eliminar para ponerse en marcha.

Answer 3

Pude resolver este problema yo mismo. En lugar de intentar importar directamente style.scss , style.scss el archivo por completo y reemplacé el elemento <style> de App.vue por lo siguiente:

  <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>

Esto tiene la ventaja adicional de hacer que las variables Bootstrap estén disponibles en el bloque de estilo de los componentes Vue. Además, { test: //.scss$/, loaders: [ ''style'', ''css'', ''sass'' ] } de webpacker.base.conf.js completo, pero mantuve el bit relacionado con las fuentes. El cargador para archivos .vue ya se ocupa de sass.