首页 文章

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

提问于
浏览 次
14

我刚刚开始使用Vue.js Webpack vue-loader bootstrap-sass sass-loader，我有点失落 .

我想要做的是使用我的SPA Vue.js代码的SASS版本的bootstrap . 我想这样做，所以我的引导自定义可以使用SASS完成 . 这就是我所做的：

  • 使用vue-cli创建了一个新的Vue.js webpack项目 .

  • 已安装bootstrap-sass和sass-loader .

  • 在build / webpack.base.conf.js中添加了以下内容：

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

  • 用一行创建了src / style.scss： @import 'bootstrap';

  • 将此行添加到src / main.js的顶部： import './style.scss'

当我现在运行 npm run dev 时，我收到以下错误：

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

我不确定为什么这不起作用 .

此外，与此问题相关，如何访问Vue组件中的Bootstrap SASS变量？如果我理解这里发生了什么，SASS将被编译为CSS，然后被包含在main.js内联中，这意味着我的组件中无法访问任何Bootstrap变量 . 有没有办法实现这个目标？

javascript twitter-bootstrap vue.js bootstrap-sass sass-loader

3 回答

  • 0

    我自己设法解决了这个问题 . 我没有尝试直接导入 style.scss ，而是完全删除了文件，并用以下内容替换了 App.vue 的 <style> 元素：

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

    这还有在Vue组件的样式块中提供Bootstrap变量的额外好处 . 另外，我完全从 webpacker.base.conf.js 删除了 { test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] } 但保留了处理字体的位 . .vue 文件的加载程序已经处理了sass .

    回复于
  • 15

    我设法以正确的方式工作：

    VUE：

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

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

    请注意我使用 bootstrap-sass 而不是默认 boostrap

    回复于
  • 2

    它正在尝试解析您在webpack.base.conf.js的此部分中指定为加载程序的 style 模块：

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

    鉴于你有一个css和sass加载器，这可能是一个错误的条目，你可以删除，让自己去 .

    回复于

相关问题