共计 1043 个字符，预计需要花费 3 分钟才能阅读完成。
下载 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>