Javascript Vue.js+；网页包+；vue加载器+；引导式sass+；sass装载机

我刚刚开始使用Vue.js+Webpack+Vue loader+bootstrap sass+sass loader，我有点迷路了

我想做的是在SPA Vue.js代码中使用SASS版本的引导。我想这样做，这样我的引导定制就可以使用SASS完成。以下是我所做的：

• 使用Vue cli创建了一个新的Vue.js+webpack项目
• 已安装引导sass和sass加载程序
• 在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组件中的引导SASS变量？如果我理解这里发生的事情，SASS将在内联包含在main.js中之前编译为CSS，这意味着在我的组件中没有对任何引导变量的访问。有什么方法可以实现这一点吗？

它正在尝试解决您在webpack.base.conf.js的本节中指定为加载程序的

样式

模块：

{test:/\.scss$/，加载程序：[**'style'**，'css'，sass']}

---

考虑到您有一个css和sass加载器，这可能是一个错误的条目，您可以将其删除以继续操作。

我自己设法解决了这个问题。我没有尝试直接导入

style.scss

，而是完全删除了该文件，并用以下内容替换了

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>

$icon字体路径：“../node_modules/bootstrap sass/assets/font/bootstrap/”；
@导入“../node_modules/bootstrap sass/assets/stylesheets/_bootstrap”；
.包装纸{
边距顶部：$navbar高度；
}

---

这还有一个额外的好处，就是使引导变量在Vue组件的样式块中可用。另外，我从

webpacker.base.conf.js

中完全删除了

{test:/\.scss$/，loader:['style'，css'，sass']}

，但保留了处理字体的位。

.vue

文件的加载程序已经处理sass。

我成功地以如下方式处理它：

Vue：

---

请注意，我使用的是

bootstrap sass

，而不是默认的

bootstrap

是的，简单比复杂好。如果使用

.wrapper{

语法，似乎您需要的是

lang=“scss”

，而不是sass。谢谢！这是最好的方法。我甚至不必加载程序部分。

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

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