vue 配置sass、scss全局变量

下载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>