通过Bootstrap使用自定义SCSS -Vue+ Webpack + Vue.js
通过Bootstrap使用自定义SCSS -Vue+ Webpack + Vue.js
提问于 2018-05-28 09:12:46
我正在使用VueJS和Bootstrap-Vue创建一个应用程序。我正在尝试导入SCSS文件，以覆盖Bootstrap变量以及自定义样式的另一个SCSS。
这是我到目前为止所知道的：
- 安装了node-sass、sass-loader和css-loader
npm install node-sass sass-loader css-loader --save-dev
在build/webpack.base.conf.js中，
- 添加了以下内容
{ test:/\.(s*)css$/, use:['style-loader','css-loader', 'sass-loader']}
在src/assets/scss/app.scss中，
- 创建了一个SCSS文件
main.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
import fontawesome from '@fortawesome/fontawesome'
import light from '@fortawesome/fontawesome-pro-light'
Vue.use(BootstrapVue)
Vue.config.productionTip = false
fontawesome.library.add(light)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
<style lang="scss">
@import './assets/scss/app.scss';
</style>当我运行npm run dev时，我得到以下错误：
ERROR Failed to compile with 1 errors 21:05:54
error in ./src/main.js
Syntax Error: Unexpected token, expected ; (29:7)
27 | })
28 |
> 29 | <style lang="scss">
| ^
30 | @import './assets/scss/app.scss';
31 | </style>
32 |
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
fontawesome.library.add(light)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
<style lang="scss">
@import './assets/scss/app.scss';
</style>我不确定为什么它不能工作。我在Github和Stack Overflow上尝试了各种解决方案。
任何帮助都将不胜感激。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-28 09:40:25
你不能像这样在javascript中写style标签。您需要将其移动到vue文件并附加加载程序，或者使用标准导入：
import './assets/scss/app.scss';没有style标签或@符号。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50557966
复制相关文章
相似问题