通过 Bootstrap-Vue + Webpack + Vue.js 使用自定义 SCSS

Posted 2023-02-22

【中文标题】通过 Bootstrap-Vue + Webpack + Vue.js 使用自定义 SCSS

【英文标题】：Use custom SCSS with Bootstrap-Vue + Webpack + Vue.js

【发布时间】：2018-11-06 13:13:54

【问题描述】：

我正在使用带有 Bootstrap-Vue 的 VueJS 创建一个应用程序。我正在尝试导入 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 上尝试过各种解决方案。

任何帮助将不胜感激。

【问题讨论】：

您的文件是 file.js，您需要使用单文件组件才能按预期使用 scss。您需要将文件转换为 file.vue，然后才能使用

【参考方案1】：

你不能像这样在 javascript 中编写样式标签。您需要将其移动到 vue 文件并附加加载程序，或者使用标准导入：

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

没有style 标签或@ 符号。

【讨论】：

我还必须从 build/webpack.base.conf.js 中删除 test:/\.(s*)css$/, use:['style-loader','css-loader', 'sass-loader']。

我添加了文件 assets/scss/app.scss 并收到错误“找不到此相关模块：./assets/scss/app.scss in ./src/main.js”跨度>

@Cichy 没有太多信息可以继续，我不知道你的目录结构是什么样的。