Vue2+VueRouter3+Webpack3.6+Axios项目实战----sass样式整合进项目（五）

最新推荐文章于 2024-01-16 17:54:15 发布

飞天代码

最新推荐文章于 2024-01-16 17:54:15 发布

阅读量712

点赞数

分类专栏： vue 文章标签： Vue2+VueRouter3+Webpack3.6+Axi

本文链接：https://blog.csdn.net/weiyongliang_813/article/details/80964224

版权

vue 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

本项目采用sass进行样式编写，这里对sass的整合进行一个详细的记录。
废话不多说了，直接上图。下图就是我sass文件存放目录：
这里写图片描述

sass里面用到了部分图片、图标，我定义成了全局变量

$global-img-path:                  '/static/common/img' !default;
$page-img-path:                    '/static/page/img' !default;
$page-media-path:                  '/static/media/' !default;
$ztree-img-path:                   '/static/ztree/' !default;

而图片则存放到了static文件夹下，注意路径不能采用相对路径，不然编译会报错误
这里写图片描述

因为该项目比较复杂，而且许多组件的样式经常重复使用，所以我采用的引入sass文件作为额外样式文件，而不是在每个vue文件中去定义style。对utils.js文件进行一个简单配置即可。
这里写图片描述

修改内容，大概是62行的位置

sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass').concat({
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve(__dirname, '../src/assets/sass/theme/default/GoStyle.scss')
      }
    }),

注意：如果搜索sass和vue2关键词，度娘里面有大量的相关文档，其实有些已经并不适合，因为现在的项目环境默认都已经配置好了，以前是需要程序员自行配置，比如什么style抽取成文件，比如sass的编译转换等。