下载vue项目
下载vue项目就不多说了，大家既然搜索这个标题，肯定不差这一步
依赖：
1.下载sass-resources-loader
执行npm/cnpm install sass-resources-loader --save-dev
修改配置
打开build文件夹，找到下面的utils文件，找到exports.cssLoaders里的下面这段，将scss配置改成如下形式
return {css: generateLoaders(),postcss: generateLoaders(),less: generateLoaders('less'),sass: generateLoaders('sass', { indentedSyntax: true }),scss: generateLoaders('sass'),stylus: generateLoaders('stylus'),styl: generateLoaders('stylus')}
把scss项替换成如下形式
scss: generateLoaders('sass').concat({loader:'sass-resources-loader',options:{resources:path.resolve(__dirname,'../src/assets/sass/common.scss')}}),
这里我的common.scss放置了变量文件variable.scss和mixin.scss
// mixin.scss@import './variable.scss';@import './mixin.scss';
重新执行npm run dev 启动服务
在vue组件里写上一段试试吧，例如：
<style lang="scss">#app {font-size: 14px;font-family: "Avenir", Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;color: $fontMainColor;height: 100%;}.triangle-top{display: inline-block;@include triangle(bottom, 10px, #ff0000)}.test{background: #ccc;@include box-shadow(0 0 5px rgba(0,0,0,.3));}</style>
