使用带有Bootstrap-Vue + Webpack + Vue.js的自定义SCSS

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (45)

我正在用Bootstrap-Vue创建一个使用VueJS的应用程序。我正在尝试导入SCSS文件以覆盖Bootstrap变量以及另一个自定义样式的SCSS。

这是我到目前为止:

  • 安装了node-sass,sass-loader和css-loader

npm install node-sass sass-loader css-loader --save-dev

  • 添加以下内容来构建/ 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上的各种解决方案。

提问于
用户回答回答于

你不能像这样在javascript中写样式标签。你需要将其移动到一个vue文件并附加一个加载器,或使用标准导入:

import './assets/scss/app.scss';`

没有style标签或@符号。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励