vue使用scss文件，直接在.vue文件中使用

低版本cli解决办法:

• 自己突发奇想，结合自己以前的项目，也想直接引用scss，而不需要配置那么多。
  先给上以前版本的cli使用的方法吧：点击进入

高版本cli：

本人vuecli的版本为 "@vue/cli-service": "~4.5.0",

本人vue版本为："vue": "^2.6.11",

参考vue官方：点击进入

1. 随便找个路径创建一个.scss文件代码如下

$bg_color:rgb(204, 41, 41);
$size:88px;

如图所示：

2. 在vue.config.js文件夹内：

module.exports = {
    devServer: {
        host: 'localhost',
        port: '8090'
    },
    css: {
        loaderOptions: {
            // 给 sass-loader 传递选项
            // sass: {
            //   // @/ 是 src/ 的别名
            //   // 所以这里假设你有 `src/variables.sass` 这个文件
            //   // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
            //   additionalData: `@import "~@/stylesheet/index.scss"`
            // },
            // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
            // 因为 `scss` 语法在内部也是由 sass-loader 处理的
            // 但是在配置 `prependData` 选项的时候
            // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
            // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
            scss: {
                prependData: `@import "~@/style/commonstyle.scss";`
            },
            // 给 less-loader 传递 Less.js 相关选项
            // less:{
            //   // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
            //   // `primary` is global variables fields name
            //   globalVars: {
            //     primary: '#fff'
            //   }
            // }
        }
    }
}

3. 在.vue文件中直接使用：

<style lang='scss'>
h1{
  color: $bg_color
}
</style>

如图所示：

效果图：

完活！！

感谢启发，还是自己写一个以防找不到吧