在Bootstrap-Vue+Webpack+Vue.js中使用自定义SCSS报错求助

嘿，我一眼就发现问题所在了——你在main.js里写了Vue单文件组件的<style>标签！这可是纯JavaScript文件，根本不识别这种模板语法，难怪会报Unexpected token, expected ;的错误。

下面一步步给你解决：

第一步：移除main.js里的错误代码 #

先把main.js里这段不符合JS语法的代码删掉：

<style lang="scss">@import './assets/scss/app.scss';</style>

第二步：选择正确的SCSS导入方式 #

有两种靠谱的方案，选一种适合你的就行：

方案1：直接在main.js中用JS语法导入SCSS

既然你已经配置好了webpack的sass-loader，直接用JavaScript的import语法导入SCSS文件即可：

// main.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

// 先导入Bootstrap和Bootstrap-Vue的基础样式
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// 再导入你的自定义SCSS文件
import './assets/scss/app.scss'

Vue.use(BootstrapVue)

new Vue({
  el: '#app',
  render: h => h(App)
})

方案2：在根组件（App.vue）的style标签中导入

如果习惯在Vue单文件组件里管理样式，就打开你的根组件App.vue，在它的style块中导入：

<!-- App.vue -->
<template>
  <div id="app">
    <!-- 你的组件内容 -->
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="scss">
// 如果需要覆盖Bootstrap变量，可以先导入Bootstrap的变量文件
// @import '~bootstrap/scss/_variables.scss';
// 再导入自定义SCSS
@import './assets/scss/app.scss';
</style>

第三步：优化依赖（可选但推荐） #

node-sass已经被官方废弃，建议换成dart-sass（即npm包sass），避免后续版本兼容问题：

# 卸载旧依赖
npm uninstall node-sass sass-loader css-loader --save-dev
# 安装兼容的新依赖
npm install sass sass-loader css-loader style-loader --save-dev

第四步：确认webpack配置正确性 #

检查build/webpack.base.conf.js中的规则，确保loader顺序正确（style-loader在最外层，依次是css-loader、sass-loader）：

module: {
  rules: [
    // 其他规则...
    {
      test: /\.(sa|sc|c)ss$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    }
  ]
}

做完这些后，再执行npm run dev，应该就能正常运行了！

内容的提问来源于stack exchange，提问作者Kumaran S