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

99封情书 提交于 2019-11-27 14:04:40

问题


I'm just getting started with Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader and I'm a little lost.

What I'd like to do is use the SASS version of bootstrap with my SPA Vue.js code. I want to do this so my bootstrap customisations can be done using SASS. Here is what I've done:

  • Created a new Vue.js + webpack project with vue-cli.
  • Installed bootstrap-sass and sass-loader.
  • Added the following to build/webpack.base.conf.js:

    { test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] },
    { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url', query: { limit: 10000 } }
    
  • Created src/style.scss with one line: @import 'bootstrap';

  • Added this line to the top of src/main.js: import './style.scss'

When I now run npm run dev I get the following 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

I'm not sure why this isn't working.

Also, related to this question, how do I get access to Bootstrap SASS variables inside my Vue components? If I understand what is going on here, the SASS will be compiled to CSS before being included inline in main.js meaning there is no access to any Bootstrap variables in my components. Is there a way to achieve this?


回答1:


I managed to solve this problem myself. Instead of trying to directly import style.scss, I deleted the file entirely and I replaced the <style> element of App.vue with the following:

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

This has the added bonus of making Bootstrap variables available in the style block of Vue components. Also, I removed { test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] } from webpacker.base.conf.js entirely but kept the bit dealing with fonts. The loader for .vue files already deals with sass.




回答2:


I managed to worked it the right way like this:

Vue:

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

webpack config loader:

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

Take note that I use the bootstrap-sass and not the default boostrap




回答3:


It's trying to resolve the style module that you specified as a loader in this section of your webpack.base.conf.js:

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

Given that you have a css and sass loader, that's likely an erroneous entry that you can remove to get yourself going.



来源:https://stackoverflow.com/questions/35308180/vue-js-webpack-vue-loader-bootstrap-sass-sass-loader

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!