twitter-bootstrap Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35308180/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader
提问by rstuart85
I'm just getting started with Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader and I'm a little lost.
我刚刚开始使用 Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader，我有点迷茫。
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:
我想做的是在我的 SPA Vue.js 代码中使用 SASS 版本的引导程序。我想这样做，以便可以使用 SASS 完成我的引导程序自定义。这是我所做的：
- 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'
- 使用 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'
When I now run npm run devI get the following error:
当我现在运行时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
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?
另外，与此问题相关，如何访问 Vue 组件中的 Bootstrap SASS 变量？如果我理解这里发生了什么，SASS 将被编译为 CSS，然后被内联包含在 main.js 中，这意味着无法访问我的组件中的任何 Bootstrap 变量。有没有办法实现这一目标？
回答by rstuart85
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.vuewith the following:
我自己设法解决了这个问题。style.scss我没有尝试直接 import ，而是完全删除了该文件，并将 的<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>
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.jsentirely but kept the bit dealing with fonts. The loader for .vuefiles already deals with sass.
这有一个额外的好处，即使 Bootstrap 变量在 Vue 组件的样式块中可用。此外，我完全删除{ test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] }了webpacker.base.conf.js但保留了处理字体的部分。.vue文件加载器已经处理了 sass。
回答by Cedric
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:
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"
}
Take note that I use the bootstrap-sassand not the default boostrap
请注意，我使用的是bootstrap-sass而不是默认值boostrap
回答by Gabriel Isenberg
It's trying to resolve the stylemodule that you specified as a loader in this section of your webpack.base.conf.js:
它正在尝试解析style您在 webpack.base.conf.js 的这一部分中指定为加载器的模块：
{ test: /\.scss$/, loaders: [ **'style'**, 'css', 'sass' ] }
{ 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.
鉴于您有一个 css 和 sass 加载器，这可能是一个错误的条目，您可以将其删除以开始工作。
