美文网首页taro爬坑记
taro别名引入路径方式

taro别名引入路径方式

作者: SevenLonely | 来源:发表于2019-06-09 22:44 被阅读0次

config/index.js 文件中添加节点

const path = require('path');
const config = {
  alias: {
    '@components': path.resolve(__dirname, '..', 'src/components'),
    '@utils': path.resolve(__dirname, '..', 'src/utils')
  }
}

但若要在 Sass 中使用别名,请在config/index.js文件中添加节点
(Taro 对样式的处理是 node-sass -> postcss,在 sass 这步就报错了,不能用 postcss-import 插件解决)
备注:目前资源引用时仍无法使用别名,如 background: url('@assets/logo.png')

plugins: {
  sass: {
    importer: function(url) {
      const reg = /^@styles\/(.*)/
      return {
        file: reg.test(url) ? path.resolve(__dirname, '..', 'src/styles', url.match(reg)[1]) : url
      }
    }
  }
}

如上配置,编译可以通过,但是vscode编辑器爆红。解决办法在tsconfig.json中添加如下内容

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@utils": [
        "src/utils"
      ],
      "@components": [
        "src/components"
      ],
    },
  },
}

这样既可在所在的.tsx文件中使用

import { setGlobalData, getGlobalData } from "@utils";

相关文章

  • taro别名引入路径方式

    在config/index.js 文件中添加节点 但若要在 Sass 中使用别名,请在config/index.j...

  • Taro3.x 配置项目遇到的问题

    1.Taro 配置 alias 为了在 Taro 项目中,配置目录别名,方便引用路径,减少../../../ 官方...

  • Taro+VSCode配置路径别名

    上一篇我们已经学会了统一样式和公共配置,这次弄一下配置路径别名 随着项目文件夹的越来越多,我们每次引入组件或者图片...

  • taro中路径别名的配置

    网上看了很多文章taro配置别名,说有两种方式,我看官方是两种方法结合才会生效,记录一下。 1. 在config下...

  • vscode - 常用插件

    updating 1 别名路径跳转 作用: 在引入的文件中, 鼠标悬浮到引入路径, 按住ctrl并单击会跳转到对...

  • Taro 2.2 全面插件化,支持拓展和定制个性化功能

    自 2.2 开始,Taro 引入了插件化机制,允许开发者通过编写插件的方式来为 Taro 拓展更多功能或者为自身业...

  • taro添加别名

    https://segmentfault.com/a/1190000019132845?utm_source=ta...

  • vue cli 3配置别名及webstorm

    vue cli 3配置别名 方便在各个组件中对引入资源的路径管理 在vue.config.js中进行别名配置 这样...

  • 2018-12-08

    Vue.js别名配置 一下是鄙人一引入css文件路径太长,代码不雅观配置的别名,其他配置同理。 没有配置别名时: ...

  • Windows WSL 启动 exe程序

    通过命令别名引入exe的路径(此处不能带参数) 通过别名执行exe程序,exe的输出不能显示到wsl控制台 打开另...

网友评论

    本文标题:taro别名引入路径方式

    本文链接:https://www.haomeiwen.com/subject/mfdoxctx.html