assace 2019-07-01
下载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>