[英]Vite import CSS with alias in main.ts
I'm trying to replace vue-cli with vite.我正在尝试用 vite 替换 vue-cli。 I have a vite.config.js so I can use alias for imports:
我有一个 vite.config.js 所以我可以使用别名进行导入:
export default {
alias: {
'@': require('path').resolve(__dirname, 'src'),
},
};
Then in my main.ts I try to import my css file (I tried it with or without the .module
:然后在我的 main.ts 中,我尝试导入我的 css 文件(我尝试使用或不使用
.module
:
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import '@/assets/app.module.css';
createApp(App).use(router).mount('#app');
But I get this error:但我收到此错误:
[vite] Failed to resolve module import "@/assets/app.module.css".
[vite] 无法解析模块导入“@/assets/app.module.css”。 (imported by /src/main.ts)
(由 /src/main.ts 导入)
What am I doing wrong?我究竟做错了什么?
According to those code lines根据那些代码行
alias a path to a fs directory
别名 fs 目录的路径
the key must start and end with a slash键必须以斜线开头和结尾
'/@foo/': path.resolve(__dirname, 'some-special-dir')
so try out :所以试试:
'/@/': require('path').resolve(__dirname, 'src'),
@Boussadjra Brahim answered the original question, I just want to add some insights for other who have problems with VSCode and the vite setup. @Boussadjra Brahim 回答了最初的问题,我只想为其他在 VSCode 和 vite 设置方面遇到问题的人添加一些见解。 Here is my minimalistic tsconfig.json
这是我的简约 tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"esModuleInterop": true,
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"target": "esnext"
},
"include": [
"src/**/*.ts",
]
}
import seedrandom from 'seedrandom';
import seedrandom from 'seedrandom';
vue
vue
导入/@/
but only @/
/@/
导入所有内容,而只需要使用@/
get x
, set x
)get x
, set x
)Tested已测试
just wanted to add: For anyone still looking at this answer you need to add resolve so it work, as documented in the website.只是想补充一点:对于仍在查看此答案的任何人,您需要添加解析以使其正常工作,如网站中所述。 I didn't added the slashes '/@/' This works for me:
我没有添加斜杠 '/@/' 这对我有用:
example:例子:
resolve: {
alias: {
'@': require('path').resolve(__dirname, 'src')
}
},
https://vitejs.dev/config/#resolve-alias https://vitejs.dev/config/#resolve-alias
As of vite@2.1.5
I could solve resolution of @
and ~
aliases in the following way:从
vite@2.1.5
我可以通过以下方式解决@
和~
别名的解析:
add vite-aliases添加vite-aliases
modify vite.config.js
as described in the readme.md
vite.config.js
中的描述修改readme.md
add an alias for the referenced scss file using the ~
alias as follows:使用
~
别名为引用的 scss 文件添加别名,如下所示:
aliases.push({ find: '~bootstrap', replacement: 'bootstrap' })
now vite.config.js
looks as follows:现在
vite.config.js
如下所示:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { getAliases } from 'vite-aliases'
const aliases = getAliases();
// add aliases to import scss from node_modules here
aliases.push({ find: '~bootstrap', replacement: 'bootstrap' })
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: aliases
},
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "@scss/shared.scss";'
}
}
}
})
this allowed me to import scss files as follows:这允许我按如下方式导入 scss 文件:
in src/main.ts
:在
src/main.ts
:
import '@scss/main.scss'
in src/scss/main.scss
:在
src/scss/main.scss
:
@import "~bootstrap/scss/bootstrap";
Obviously, if you need to import more scss files from a subdirectory of node_modules
, sou need to add some more aliases to aliases
.显然,如果你需要从一个子目录中导入更多的SCSS文件
node_modules
,SOU需要一些更多的别名添加到aliases
。 Leaving out the tilde alias for importing bootstrap.scss
worked, but it would not be recognized by my IDE.省略用于导入
bootstrap.scss
的波浪号别名有效,但我的 IDE 无法识别它。 Adding the css.preprocessorOptions.scss.additionalData
causes the shared.scss
to be imported in each vue SFC.添加
css.preprocessorOptions.scss.additionalData
会导致在每个 vue SFC 中导入shared.scss
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.