Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

when i import the css file in less file, vite would throw error:no found file,but if i change the .css into .less would no error

See original GitHub issue

Describe the bug

when i import css file in the less file, it would throw the error

Reproduction

repoduction:

https://github.com/Jeromy-L/test-vite/tree/test2

branch :test2

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:


System:
    OS: macOS 11.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 118.15 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
    npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm
  Browsers:
    Chrome: 90.0.4430.93
    Safari: 14.0.2

Used package manager:

Logs

4:18:49 ├F10: PM┤ [vite] Internal server error: Failed to find 'base.css'
  in [
    /Users/xxx/Documents/project/test-vite/client/views
  ]
  Plugin: vite:css
  File: /Users/xxx/Documents/project/test-vite/client/views/Test.vue?vue&type=style&index=0&lang.less
      at /Users/xxx/Documents/project/test-vite/node_modules/vite/dist/node/chunks/dep-8dd46f43.js:65:13
      at async Promise.all (index 0)
      at async LazyResult.runAsync (/Users/xxx/Documents/project/test-vite/node_modules/vite/node_modules/postcss/lib/lazy-result.js:358:11)
      at async compileCSS (/Users/xxx/Documents/project/test-vite/node_modules/vite/dist/node/chunks/dep-2c03f3f9.js:18942:27)
      at async TransformContext.transform (/Users/xxx/Documents/project/test-vite/node_modules/vite/dist/node/chunks/dep-2c03f3f9.js:18574:50)
      at async Object.transform (/Users/xxx/Documents/project/test-vite/node_modules/vite/dist/node/chunks/dep-2c03f3f9.js:43780:30)
      at async transformRequest (/Users/xxx/Documents/project/test-vite/node_modules/vite/dist/node/chunks/dep-2c03f3f9.js:59429:29)
      at async /Users/xxx/Documents/project/test-vite/node_modules/vite/dist/node/chunks/dep-2c03f3f9.js:59566:32
  vite:time 61ms  /client/views/Test.vue?vue&type=style&index=0&lang.less +13ms

Issue Analytics

State:
Created 2 years ago
Reactions:2
Comments:17 (9 by maintainers)

Top GitHub Comments

1reaction

Jeromy-Lcommented, May 8, 2021

Bug in Vite Less Plugin. Need to enable the relativeUrls option.

i think i add the config into vite.config.js then will solve

css: {
    preprocessorOptions: {
      less: {
        relativeUrls: true,
      }
    }
  },

0reactions

sodateacommented, Mar 1, 2022

After further investigation, I think I got it wrong. Vite did configure the CSS resolver correctly - it has a preferRelative option enabled.

And after a closer reading of the less documentation and source code, I think rewriteUrls: 'local' might be a better fix than relativeUrls: true.

Top Results From Across the Web

Features | Vite

The above will throw an error in the browser. Vite will detect such bare module imports in all served source files and perform...

import .css file into .less file - Stack Overflow

All imports are other .less files and all works as it should. My current issue is this: I want to import a .css...

CSS Module Options not working · Issue #254 · vitejs/vite

I have created vite.config.js: module.exports ... can i use css-modules by import a .less file? not change to .module.less?i want to use ...

Solving the React Error: Not Picking Up CSS Style | Pluralsight

In this guide, you will learn about the errors that can occur while importing a CSS file into your React file.

style-loader - webpack

You should use MiniCssExtractPlugin if you want to include a static <link href="path/to/file.css" rel="stylesheet"> . import "./styles.css"; import ...