不是已经生成css了吗。。。html不能直接使用scss，你讲link里的引用改为“test.css”，而不是.scss

不知道是不是楼主想要的结果！我知道有一种镜像功能

定义和用法：iframe 元素会创建包含另外一个文档的内联框架（即行内框架）

如图所示：

这里的src是调用的html地址！

好像是这两个原因中的一个，1，scss的配置写错了，scss和sass是两个配置文件。一个是语言的问题，编译utf-8的内容不能出现中文。

好像不能直接引用.scss（和.sass一样，只是写法规范不同）文件，需要通过工具（软件或命令行）先进行编译生成.css文件后，再引入.css文件使用。

    在Vue中引用外部SCSS(SCSS里面使用了图片)时，loader报错：

* ../images/xxx.png in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=stylesindex=0bustCache!./src/App.vue

    原因：

        1. 某*.scss文件引用了其它目录的图片文件

        2. 在app.vue中使用scss时，用scss的语法引入了该*.scss文件

        3. 最终loader解析图片路径出错

需要先安装 node-sass及sass-loader

npm i node-sass --save-dev

npm i sass-loader --save-dev

style lang="scss"

    @import './assets/style/index.scss'

/style

*这种引入方法的前提是：在*.scss中没有使用到图片时编译通过。当在scss中引用图片时，编译报错，loader错。原因是路径解析错误。

.test {

background-image:url("../images/xxx.png");

}

require('./assets/style/index.scss')

或 import './assets/style/index.scss'

style lang="scss"

    @import '~@/assets/style/index'

/style

* css loader 会把非根路径的url解析为相对路径，加`~`前缀才解析为模块路径。

在index.scss中使用图片：

.test {

    background-image: url("./assets/image/xxx.png");

    background-repeact: no-repeact;

}