前提已经创建好vue项目。
1,安装sass依赖包,cmd进入项目路径,安装sass模块【npm install node-sass -save】
2,安装加载器【npm install sass-loader --save】
3,修改style标签【<style lang="scss">】,写入函数式样式,成功即可。
4,现在可以在组件内使用scss语法了,但无法创建全局的scss变量影响页面布局,如果需要全局的scss变量支持继续以下操作
5,安装sass-resources-loader插件,【npm install sass-resources-loader -save】
6,修改配置,《build/utils.js》,将 scss: generateLoaders('sass')修改为:
generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/scss/globel.scss') //路径为个人的scss文件路径请自行修改
}
}
)