使用自定义SCSS和Bootstrap-Vue Webpack Vue.js-Java 学习之路

我正在使用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 回答

0
你不能在这样的javascript中编写样式标记 . 您需要将其移动到 vue 文件并将加载器附加到它，或使用标准导入：
```
import './assets/scss/app.scss';
```
没有 style 标签或 @ 符号 .
回复于 2024-05-03T09:31:11+08:00

使用自定义SCSS和Bootstrap-Vue Webpack Vue.js

1 回答

相关问题