Context: I'm moving from AngularJS 1.x to Angular 5 and trying to
understand some points.
When I import bootstrap from npm modules in style.css or in styles array inside angular-cli.json the css content is merged into html after build.
Is possible to set the build to set a external css link tag instead? When I can set the build to copy bootstrap.min.css from node_modules to assets or vendor folter?
I could copy the bootstrap.min.css by hand into assets folder, but that's not in the CLI spirit. I also can't use CDN in this case.
You can add link to bootstrap stylesheet in your index.html as normal
Related
I am trying to convert an HTML template into vue project. I am very much confused about where to keep my css js files. Whether it should be in the public directory or it should be in the src directory?
you can keep your CSS and Js file inside the src directory rather than public.
public is used for keeping your static file such as static JSON, image, etc. which will not go through webpack.
Inside src/assests paste your css, fonts and image folders
like here
then make sure to include them in main.js/ts
eg.
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css' //boostarp
import './assets/css/materialdesignicons.min.css'
import './assets/css/tiny-slider.css'
import './assets/css/style.css'
import './assets/css/colors/default.css'
if it uses boostrap install npm install bootstrap as you will have to inlude them as I have shown above. as per Bootstrap Doc.
NB: Vue3 does not support boostarp 4, and vue-boostrap use boostrap 5 instaed
I am currently merging a project from server-side rendering to static page rendering. According to the docs since nuxt 2.13 You can set the target to static inside of nuxt.config and run nuxt generate. This is correctly generating an html file for each file within my pages folder, however my pages lack all the styles. I am not sure if this behavior is expected or if I am missing something. I am currently using scss and bootstrap for the project. Any help would be appreciated.
I'm using vue cli 3, Vuetify. My back-end programmer asked me that put my css, js, and img file in static folder for him. How can I do? I cannot find webpack.config.js file at vue cli 3. some guys said use vue.config.js file, but I still don't know how to solve this problem.
thank you.
this link is build result. I want to put css, img, js files in one static folder.
Take a look at Public Folder for Vue CLI 3. To quote the docs
Any static assets placed in the public folder will simply be copied and not go through webpack. You need to reference them using absolute paths.
All you would need to do is place your css, js, images in your public folder
My question is related to webpack. Let's say I'm using webpack and vue.js project. How does webpack build the project when I run the npm run build. I know that there's a build folder where config files have to be added and there'll be output folder dist which will save my final project.
Question 1) WHat does webpack do? Does it search entry point in config file so that it knows where to start building process from? for vue.js it's src/main.js. AM I right?
QUestion 2) when it finds main.js, what does it do? does it go from main.js to top so that to find all the dependencies ?
QUestion 3) Let's say IT found a .vue file. what does it do? does it seperate js code - put it into some other js file, then seperate css and put it into some other css file? or just take the whole .vue code and puts it into js file(with all its html and so on)?
QUestion 4) Just need that line of code what it looks to show me QUestion 3) answer.
Yes, webpack has an entry point (entry section from config). It's not src/main.js exactly, it's configurable.
It builds a dependency tree starting from an entry point.
It will be handled with loaders in the sequence you provided. Usually, it's vue-loader which transforms vue files to js, next it goes to babel-loader which transpiles your js dialect (Flow/ES6/ES2017/TS) to ES5, next ot js-loader which can finally split all the code to dependencies and continue loading.
CSS separation can be done with webpack plugins like ExtractTextWebpackPlugin and then your css dialect (LESS/SASS/PostCSS, etc) will be transformed with loaders, i.e. sass-loader, css-loader, style-loader.
When styles extraction plugin is not present, it will distribute css along with js and put it to the head styles.
How can i add new css and js file in my BC Stencil Theme ?
and i cant find my all theme folder in cyberduck! my theme name is Cornerstone Light.
The legacy theme platform (Blueprint) used Cyberduck to upload theme files, but Stencil uses Stencil CLI developer tools. If your store has a Stencil theme applied, you won't see a template folder in WebDAV.
First, install the prerequisites for your OS and install Stencil CLI:
https://stencil.bigcommerce.com/docs/installing-and-launching-stencil-1
Download your theme so you can work on it locally. CSS files can be added to assets/scss and js files can be installed with a package manager like npm, or uploaded to assets/js.
After uploading your custom.scss file to the assets/scss directory, you can import it into the default scss file (theme.scss) with an #import statement:
#import "custom";
Here are links to the documentation on adding CSS and js files to your theme:
https://stencil.bigcommerce.com/docs/custom-sass-functions#Compiling
https://stencil.bigcommerce.com/docs/js-101
You might also find this BC Community discussion helpful:
https://forum.bigcommerce.com/s/question/0D51B00003sRDg7SAG/custom-css-in-big-commerce