![]() ![]() You can then run "live-server dist" - the key factor being I'm not asking live-server to look outside of the directory it is serving. Here is an example directory structure that is compiling typescript to a dist/js directory and sass to a dist/css directory. In general, when using live-server, try to create a public or dist directory that you plan to hold all your static content. This extension is for Live Server (VSCode Extension - required v3.0.0+). However, in the default settings for live-server, in the event of a 404, it will default to trying to read index.html which causes a MIME type error that it is trying to load "text/html" for many people facing this confusion. Live Server - Makes your existing server live - this is a Web Extension that helps you to live reload feature for dynamic content (PHP, Node.js, ASPNET - Whatever, it doesn't matter). If a file is stipulated instead of a directory, or the directory does not contain the assets to be loaded by live-server, it will result in a 404. The server is a simple node app that serves the working directory and The reason this happens we can see from the live-server docs: Does the css file needs to be in the same directory? ![]() The css link code should be fine since it works correctly when opening directly from the browser. When typing npm start from the terminal, my html file loads fine on my browser, but for some reason the linked css file isn't loaded. I click the home directory and then the html file loads with the css. To ensure successful debugging, it is enough to specify the built-in web server port and accept the default settings that WebStorm suggests for other debugger options. The built-in debugger starts automatically when you launch a debugging session. Out-of-the-box support for JavaScript, TypeScript, React. WebStorm provides a built-in debugger for your client-side JavaScript code. Just like IntelliJ IDEA and other JetBrains IDEs, WebStorm will make your development experience more enjoyable, automating routine work and helping you handle complex tasks with ease. Works, which shows the working directory on the browser. WebStorm is an integrated development environment for coding in JavaScript and its related technologies. Or "start": "live-server home/index.html & styles.css"Īll have the same results. Package.json: "start": "live-server home/index.html" Which is the Live server extension available for WebStorm In VS Code, we have Live server extension available to publish content live on server. But if I add the html file as the argument for live-server, it only loads the html file without any css changes. When using live-server for my npm script as npm start, without any argument, it just shows all files of my workspace and the css works if I click on the directory where my html file is. I have my css file outside the directory where the html file is. The css works fine when opening the html file directly through the browser. My css isn't working when loading the html file through live-server. I have a css file linked with my html file. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |