摘要:需求在用开发项目的时候,有这样的一个需求我有个的公共文件需要在项目的每个文件使用,而不用分别在文件中引入。第一步首先要下载第二步,在项目里找到文件。在上面的文件里用引入其他文件。
需求:在用vue-cli开发项目的时候,有这样的一个需求:我有个.scss的公共文件需要在项目的每个 .vue 文件使用,而不用分别在.vue文件中引入。这个时候就需要用到 sass-resources-loader 。
(1)第一步:
首先要下载 : sass-resources-loader
npm install sass-resources-loader --save-dev
(2)第二步,在项目里找到build/utils文件。并找到下图位置
然后在scss: generateLoaders("sass")后面加上以下代码:
.concat( { loader: "sass-resources-loader", options: { // 需要全局引入的sass文件,这里引入了的scss文件,在所有的.vue文件都可以用到这份css样式, // 下面的resources接受一个数组,可以添加多个scss文件 resources: [path.resolve(__dirname, "../src/assets/sass/index.scss")] } } )
(3)此时文件已经配置成功,需要重启npm run dev服务才可以看到效果.
(4) 如果要导入多个文件,有两种办法:
1、在上面代码的resources数组选项增加多一个scss文件路径。 2、在上面的index.scss文件里用@import引入其他scss文件。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/113464.html
摘要:需求在用开发项目的时候,有这样的一个需求我有个的公共文件需要在项目的每个文件使用,而不用分别在文件中引入。第一步首先要下载第二步,在项目里找到文件。在上面的文件里用引入其他文件。 需求:在用vue-cli开发项目的时候,有这样的一个需求:我有个.scss的公共文件需要在项目的每个 .vue 文件使用,而不用分别在.vue文件中引入。这个时候就需要用到 sass-resources-l...
摘要:手把手教你写组件库最近在研究的实现,发现网上很少有关于插件具体实现的文章,官方的文档也只是一笔带过,对于新手来说并不算友好。 手把手教你写 Vue UI 组件库 最近在研究 muse-ui 的实现,发现网上很少有关于 vue 插件具体实现的文章,官方的文档也只是一笔带过,对于新手来说并不算友好。 笔者结合官方文档,与自己的摸索总结,以最简单的 FlexBox 组件为例子,带大家入门 v...
阅读 2375·2021-09-30 09:47
阅读 1366·2021-09-28 09:35
阅读 3236·2021-09-22 15:57
阅读 2484·2021-09-22 14:59
阅读 3633·2021-09-07 10:25
阅读 3068·2021-09-03 10:48
阅读 3035·2021-08-26 14:14
阅读 932·2019-08-30 15:55