在 vue 的 css 样式中，使用@import 和@include 可以导入和使用外部的 scss/sass

scss-vue1.jpg

就是在.talk 这个类中使用外层 scss 中定义好的 mixin 方法；

scss 的全局使用

如果想要全局定义使用某个 scss 文件时，除了 scss 的 2 个依赖（sass-loader 和 node-sass）外，还需要现在（sass-resources-loader）这个依赖

npm sass-resources-loader -d

修改配置

下载完成后，在 build 中的 utils.js 中进行配置 （注意修改你引入的路径）

scss-vue2.jpg

使用

之后就可以在你的 vue-cli 中的任何组件中，使用@include 来使用这里面的内容了

scss: generateLoaders('sass').concat({
  loader: 'sass-resources-loader',
  options:{
  resources: path.resolve(__dirname,'../src/common/mixin/scale-1px.scss')
  }
}),