14

我刚刚开始使用 Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader，我有点迷茫。

我想做的是将 SASS 版本的引导程序与我的 SPA Vue.js 代码一起使用。我想这样做，这样我的引导程序定制就可以使用 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 将在被内联包含在 main.js 之前被编译为 CSS，这意味着无法访问我的组件中的任何 Bootstrap 变量。有没有办法做到这一点？

4

3 回答 3

15

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

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

这还有一个额外的好处，就是让 Bootstrap 变量在 Vue 组件的样式块中可用。此外，我完全删除{ test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] }了webpacker.base.conf.js字体，但保留了一些处理字体的内容。文件加载器.vue已经处理了 sass。

于 2016-02-10T07:05:51.170 回答
2

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

视图：

<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

于 2016-12-12T06:31:15.333 回答
0

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

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

鉴于您有一个 css 和 sass 加载程序，这可能是一个错误的条目，您可以删除它以让自己继续。

于 2016-02-10T06:47:39.583 回答