scss/sass在vue的使用

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

scss/sass在vue的使用_第1张图片

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

scss的全局使用

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

npm sass-resources-loader -d

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

scss/sass在vue的使用_第2张图片

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

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

 

你可能感兴趣的:(Vue+Webpack,scss/sass)