Hướng dẫn vite import css - vite nhập css

Tôi đang cố gắng thay thế Vue-cli bằng Vite. Tôi có một vite.config.js để tôi có thể sử dụng bí danh cho nhập khẩu:

export default {
    alias: {
        '@': require('path').resolve(__dirname, 'src'),
    },
};

Sau đó, trong chính của tôi. Tôi cố gắng nhập tệp CSS của mình (tôi đã thử nó có hoặc không có .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');

Nhưng tôi gặp lỗi này:

[VITE] Không thể giải quyết nhập mô -đun "@/tài sản/app.module.css". (Nhập bởi /src/main.ts)

Tôi đang làm gì sai?

Đã hỏi ngày 23 tháng 10 năm 2020 lúc 15:21Oct 23, 2020 at 15:21

Theo các dòng mã đó

Bí danh Một đường dẫn đến thư mục FS Khóa phải bắt đầu và kết thúc bằng dấu gạch chéo

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

import '@/assets/app.module.css';

createApp(App).use(router).mount('#app');

0
the key must start and end with a slash

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

import '@/assets/app.module.css';

createApp(App).use(router).mount('#app');

0

Vì vậy, hãy thử:

 '/@/': require('path').resolve(__dirname, 'src'),

Đã trả lời ngày 23 tháng 10 năm 2020 lúc 17:25Oct 23, 2020 at 17:25

Boussadjra Brahimboussadjra BrahimBoussadjra Brahim

74.4K16 Huy hiệu vàng124 Huy hiệu bạc147 Huy hiệu đồng16 gold badges124 silver badges147 bronze badges

3

@Boussadjra Brahim đã trả lời câu hỏi ban đầu, tôi chỉ muốn thêm một số hiểu biết cho những người khác có vấn đề với VSCode và thiết lập VITE. Đây là tsconfig.json tối giản của tôi

{
    "compilerOptions": {
        "baseUrl": ".",
        "esModuleInterop": true,
        "moduleResolution": "node",
        "paths": {
            "@/*": [
                "src/*"
            ]
        },
        "target": "esnext"
    },
    "include": [
        "src/**/*.ts",
    ]
}

• EsmoduleInterop: Tôi cần nó có thể

  import { createApp } from 'vue';
  import App from './App.vue';
  import router from './router';
  
  import '@/assets/app.module.css';
  
  createApp(App).use(router).mount('#app');
  

  1
• Moduleresolution: là cần thiết để nhập từ

  import { createApp } from 'vue';
  import App from './App.vue';
  import router from './router';
  
  import '@/assets/app.module.css';
  
  createApp(App).use(router).mount('#app');
  

  2
• Đường dẫn: Cần không cần phải nhập mọi thứ bằng

  import { createApp } from 'vue';
  import App from './App.vue';
  import router from './router';
  
  import '@/assets/app.module.css';
  
  createApp(App).use(router).mount('#app');
  

  3 nhưng chỉ

  import { createApp } from 'vue';
  import App from './App.vue';
  import router from './router';
  
  import '@/assets/app.module.css';
  
  createApp(App).use(router).mount('#app');
  

  4
• Mục tiêu: Cần thiết để có các setters gettersand trong các mô hình của tôi (

  import { createApp } from 'vue';
  import App from './App.vue';
  import router from './router';
  
  import '@/assets/app.module.css';
  
  createApp(App).use(router).mount('#app');
  

  5,

  import { createApp } from 'vue';
  import App from './App.vue';
  import router from './router';
  
  import '@/assets/app.module.css';
  
  createApp(App).use(router).mount('#app');
  

  6)

Đã trả lời ngày 24 tháng 10 năm 2020 lúc 9:23Oct 24, 2020 at 9:23

ThomasthomasThomas

5.1963 Huy hiệu vàng25 Huy hiệu bạc57 Huy hiệu Đồng3 gold badges25 silver badges57 bronze badges

Thử nghiệm

Chỉ muốn thêm: Đối với bất kỳ ai vẫn nhìn vào câu trả lời này, bạn cần thêm giải quyết để nó hoạt động, như được ghi lại trong trang web. Tôi đã không thêm các dấu gạch chéo '/@/' Điều này phù hợp với tôi:

example:

resolve: {
    alias: {
      '@': require('path').resolve(__dirname, 'src')
    }
  },

https://vitejs.dev/config/#resolve-alias

Đã trả lời ngày 24 tháng 3 năm 2021 lúc 8:25Mar 24, 2021 at 8:25

Non404Non404Non404

8991 Huy hiệu vàng10 Huy hiệu bạc20 Huy hiệu đồng1 gold badge10 silver badges20 bronze badges

2

Kể từ

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

import '@/assets/app.module.css';

createApp(App).use(router).mount('#app');

7, tôi có thể giải quyết độ phân giải của các bí danh

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

import '@/assets/app.module.css';

createApp(App).use(router).mount('#app');

8 và

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

import '@/assets/app.module.css';

createApp(App).use(router).mount('#app');

9 theo cách sau:

• Thêm vite-aliases

• Sửa đổi

   '/@/': require('path').resolve(__dirname, 'src'),
  

  0 như được mô tả trong

   '/@/': require('path').resolve(__dirname, 'src'),
  

  1

• Thêm bí danh cho tệp SCSS được tham chiếu bằng bí danh

  import { createApp } from 'vue';
  import App from './App.vue';
  import router from './router';
  
  import '@/assets/app.module.css';
  
  createApp(App).use(router).mount('#app');
  

  9 như sau:

  aliases.push({ find: '~bootstrap', replacement: 'bootstrap' })
  

Bây giờ

 '/@/': require('path').resolve(__dirname, 'src'),

0 trông như sau:

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";'
      }
    }
  }
})

Điều này cho phép tôi nhập tệp SCSS như sau:

trong

 '/@/': require('path').resolve(__dirname, 'src'),

4:

import '@scss/main.scss'

trong

 '/@/': require('path').resolve(__dirname, 'src'),

5:

@import "~bootstrap/scss/bootstrap";

Rõ ràng, nếu bạn cần nhập thêm các tệp SCSS từ một thư mục con

 '/@/': require('path').resolve(__dirname, 'src'),

6, thì cần thêm một số bí danh vào

 '/@/': require('path').resolve(__dirname, 'src'),

7. Để lại bí danh Tilde để nhập

 '/@/': require('path').resolve(__dirname, 'src'),

8 hoạt động, nhưng nó sẽ không được IDE của tôi nhận ra. Thêm

 '/@/': require('path').resolve(__dirname, 'src'),

9 khiến

{
    "compilerOptions": {
        "baseUrl": ".",
        "esModuleInterop": true,
        "moduleResolution": "node",
        "paths": {
            "@/*": [
                "src/*"
            ]
        },
        "target": "esnext"
    },
    "include": [
        "src/**/*.ts",
    ]
}

0 được nhập vào mỗi VUE SFC.

Đã trả lời ngày 28 tháng 4 năm 2021 lúc 10:13Apr 28, 2021 at 10:13

Remigius Stalderremigius StalderRemigius Stalder

1.7082 Huy hiệu vàng23 Huy hiệu bạc28 Huy hiệu đồng2 gold badges23 silver badges28 bronze badges

2