Develop Reference

How to define the HTML file extension in Visual Studio?

My project does not recognize the css and other files in the html files I have created, although I have written the extension paths correctly. How can I fix?

First of all you need to configure serving static files in Startup
app.UseStaticFiles(); //serves wwwroot by default
To serve your theme folder you need to add the following lines
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(Directory.GetCurrentDirectory(), "theme")),
RequestPath = "/theme"
});

You did not put the correct path there. Your "style.css" is in 'theme/src/style.css' not in the 'theme/style.css'. Also use VS Code not Visual Studio because is useless if you create just files.
Also you did not provide all the files that are in the JS folder and CSS folder.

VueJS: Trying to compile two CSS files in /dist

I just began using Vue and I'm hitting a wall while trying to compile SCSS into separate files. I understand that any SCSS that I'm writing within components will be compiled into a single file (/dist/css/app[hash].css), but I would like separate files which aren't imported into any component for external use.
I have several SCSS files (frames.scss, lists.scss, and tables.scss ) that I would like to be compiled, minified, and prefixed into their own CSS files alongside the aforementioned CSS file.
I would like the build structure to look something like this (with the external CSS file existing alongside the app CSS file):
dist/
css/
app[hash].css
frames.css
lists.css
tables.css
I have very little experience with Webpack, so my vue.config.js file is currently empty and my postcss.config.js file is below:
module.exports = {
plugins: {
autoprefixer: {}
}
}
I've searched all over StackOverflow for a solution to no avail, so any help would be greatly appreciated!

For webpack 4, I think you want to look at mini-css-extract-plugin.
its a webpack plugin that, by, default, creates different files per input. You can use this with scss as you would expect. https://stackoverflow.com/a/53180597/6646536 might be a good example.
There is a similar tool i've used for webpack 3 here:
https://github.com/webpack-contrib/extract-text-webpack-plugin

Why webpack addes a './' to my extern library?

I am using webpack to build both dev and prod code. I added an extern lib correctly in webpack.config.js as below:
externals: {
dagreD3: 'dagre-d3',
}
Of course, I also added the src link to index.html correctly as below:
<script type="text/javascript" src="https://dagrejs.github.io/project/dagre-d3/latest/dagre-d3.min.js"></script>
The dev server works fine and I can use the library without problem. But when I build the prod server, for some reason, a './' was appended to the head of the 'src'. So the source become this:
src="./https://dagrejs.github.io/project/dagre-d3/latest/dagre-d3.min.js"
This breaks the server. I wonder why it is different. Both webpack.prod.config.js and webpack.dev.config.js are loading the same config with the extern:
let baseWebpackConfig = require('./webpack.config');
Thank you so much ~!

Webpack project with mutliple html / js / css files

I think that I've got how Webpack works. My problem is: Most tutorials/examples are based on a single index.html. So, how would I organize my webpack.config.js and directory structure for multiple pages?
Let's assume that I need the following things:
index.html with a css and js file
dashboard.html with a css and js file
profile.html with a css and js file
And here is what I don't get:
How would you structure your src and dist folder?
How do I have to configure Webpack? Probably with HtmlWebpackPlugin(?)
Is a single index.js file enough as entry point / How does one structure the index.js file / How do ES6 projects look in general?
A sample project would help a lot. A project with more than just an example index.html file.
Have a good day! :)

I think u can do that by convert html+js+css into web component and u can do that easily by a framework , i think Vue js give very good boilerplate full Webpack template to let u do that just start to think about the other page as a new component remember that u r using webpack to get a bundle

So you can have one watch output multiple bundle types by passing in a command line arg to build the right bundle. There can be multiple entry points in webpack but webpack is only build to output one bundle. So, to solve this issue I figured passing a command line arg to webpack is a clean way of having multiple bundle possibilities while maintaining only one config file.
To see how this can be accomplished checkout...
https://www.hipstercode.com/blog/27/

How to change path for i18n with RequireJS r.js build

I'm using RequireJS for my javascript project, and r.js to build one single javascript file for production. This single file (main.js) is then uploaded to a CDN. This all works very fine, but now I'm trying to add i18n support.
The problem is that the location of the i18n file is relative to the main javascript file. So within a module, I would have:
define(['i18n!nls/text'], function(Translation) { });
This all works very fine when I'm developing, but for production the problem is that the translation file is not relative to the main.js file as this is placed in a CDN. I don't want to store the translation file in the CDN, so how do I change the reference to that file in the build process?

I found a solution to my problem.
In the RequireJS config I've added:
requirejs.config({
paths: {
nls: "/js/nls"
}
});
Because the path starts with a slash, RequireJS knows it's not relative. Now the problem I got was that the build would fail, as RequireJS would be looking for default language files in /js/nls. Therefore, I added a symlink from the root of my webserver to the nls directory on the machine.

Had the same issue.
Use baseUrl config
require.config({
baseUrl: '/path_for_not_included_modules/'
});