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>