Develop Reference

html style selector remains after webpack postcss processing

I have added postcss loader with options to my vue js ui library project . I am using postcss loader so that when i import this npm package elsewhere the styles wont conflict. Vue CLI uses PostCSS internally.
my sample html:
<div id="navbackground ">
<h5>Sample h5 text</h5>
</div>
one of my css classes e.g. mycolors.css has following content in it:
#navbackground {
background: red;
}
h4{color:white}
configuration for postcss looks like below
const prefixer = require('postcss-prefixer')
css: {
loaderOptions: {
postcss: {
plugins: [
prefixer({
prefix: 'mystyles-'
})
]
}
}
},
And the css file generated after running web pack build looks like below and it applies prefix.
#mystyles-navbackground {
background: red;
}
h4{color:red}
AS you see from above h4 is NOT transformed with any prefix identifier and also stlyes(e.g. mystyles-navbackground) are not applied on html.
when i looked at the rendered html it has the same class id (navbackground) so it didn't apply the new style name (mystyles-navbackground)
<div id="navbackground ">
<h5>Sample h5 text</h5>
</div>
Do i need to run another loader or plugin to apply the new prefixed style names to html ?

how to use images in reactjs

Here is my code.
I have an images folder inside the "src" folder and I want to use the images inside of my components/Myapp.component.js
import React from 'react';
import imageOne from '../img/cool-img.jpg';
function Myapp() {
return (
<div className="myapp">
<h1>import image<h1>
<img src={imageOne} alt="import-img" />
<h1>relative-path image</h1>
<img src="../img/cool-img.jpg" alt="relativepath-img" />
</div>
);
}
export default MyApp;
My problem is that the first import image works fine but the second relative path image does not work.

There are some common ways to import images in the ReactJs application. for such cases that images have separated server, it's so simple just call images like below:
<img src="https://images.cdn.com/sample-image.png" alt="sample-image" />
But if the images are for the application not for a show to the users, like images of UI design, there are two common ways:
Use copy-webpack-plugin and put all photos inside a folder then after build and serve, you should serve this folder and then you can call them from your link(eg: assume we run the project on the localhost:3000):
<img src="https://localhost:3000/sample-image.png" alt="sample-image" />
Just like your first trick, put all photos inside a folder and import them inside each component you need, then use it:
import sampleImage from '..[pathToAssets]/assets/imgs/sample-image';
~~~
<img src={sampleImage} alt="sample-image" />
I hope this answer helps you.

This is not working because <img src="../img/cool-img" alt="relativepath-img" /> image src is not resolved using Webpack file-loader, when you use import statement for a file, it will be checked first by Webpack and it will use the appropriate loader for the file type, in your case its an image so it will use file-loader, it will then handover the responsibility for it to handle the resolve of your file path,
If for example do a console.log(imageOne) it will log a path for your image, based on your public file path specified in your Webpack config file.
<img src="../img/cool-img" alt="relativepath-img" /> on the other hand will be printed as is since it written inside JSX code and it will not resolve the real path for your public folder.
So you should be using the first way (importing files) to resolve your files/images path.

Vue project can't find image when using <a href> but can find it when using <img>

I have this Vue project. All I've done is run vue create foo and removed all the pre-created code that comes in the src folder when you run that command. I then added an image to the src folder and created my own App.vue, this is all I've written in it.
<template>
<div>
<img alt="Vue logo" src="./foo.png">
<a href="./foo.png" download>foo</a>
</div>
</template>
<script>
export default {
}
</script>
When I then try it out with npm run serve the website displays the image perfectly fine, but the download link does not work. It says the server doesn't have the requested file or something.

Vue loader automatically transforms img src attributes in templates into webpack module requests, but by default it doesn't do the same for links.
If you need to link directly to a file, you can put it in the public/ directory to bypass webpack (using a path relative to that directory -- i.e. for a file in public/foo/bar.jpg you'd use <a href="/foo/bar.jpg">)
Alternatively, you can leave the file where it is, and tell webpack to transform <a href> urls into module requests, just as it does image src urls, by changing the transformAssetUrls options:
/* Add to vue.config.js */
module.exports = {
chainWebpack: config => {
config.module
.rule("vue")
.use("vue-loader")
.loader("vue-loader")
.tap(options => {
// modify the options...
options = Object.assign(options, {
transformAssetUrls: {
a: "href"
}
});
return options;
});
}
}

NuxtJs vue-flip not flipping between front and back sides

I do install vue-flip into a NuxtJs (VueJS) project created using this command: npx create-nuxt-app <project-name>.
In the index.vue file i just add:
<vue-flip active-click="true">
<div slot="front">
front
</div>
<div slot="back">
back
</div>
</vue-flip>
I do register the plugin at nuxt.config.js :
plugins: [
'~/plugins/vue-flip'
]
And create the file vue-flip.js at the plugins folder :
import Vue from 'vue'
import VueFlip from 'vue-flip'
Vue.use(VueFlip)
After run npm run dev and at localhost:3000 the text front and back are visible instead of showing just the front text so when clicking the back text would appear.
How can i fix?

Did you checked you console for errors? Because there should be ones..
According to docs https://www.npmjs.com/package/vue-flip is not a vue plugin but a component, so it wont work like this. You need to specify it as a component where you use it.
import VueFlip from 'vue-flip';
export default {
components: {
'vue-flip': VueFlip
}
}

angular ui-grid sort icons do not display correctly

I've already researched and tried placing all the font files (ui-grid.eot, ui-grid.svg, ui-grid.ttf, ui-grid.woff) in the same directory as ui-grid-unstable.css. No matter what I do, the Korean looking characters still appear!
Also in firefox I get
downloadable font: download failed (font-family: "ui-grid" style:normal weight:normal stretch:normal src index:1): status=2147500037
source: file:///C:/webapp/css/lib/angular/css/ui-grid.woff app.css
downloadable font: download failed (font-family: "ui-grid" style:normal weight:normal stretch:normal src index:2): status=2147500037
source: file:///C:/webapp/css/lib/angular/css/ui-grid.ttf
I also don't use any sort of build mechanism ( bower etc.)
Is there any way to get the icons to display properly? Or like some sort of workaround
---mainDir
--css
--app.css
--images
--js
--controllers
--controller1.js
-controller2.js
etc.
--services
--app.js
etc
--lib
--angular
--css
--ui-grid.eot
--ui-grid.svg
--ui-grid.ttf
--ui-grid.woff
--ui-grid-unstable.css
--js
--angular.min.js
--angular-route.min.js
--ui-grid-unstable.js
--bootstrap
-css
-fonts
-js
--jquery
-js
--views
--view1.html
--view2.html
etc.
index.html

Turns out the problem was specific to the ui-grid-unstable.css version. Referenced the latest by using
<link href="http://ui-grid.info/release/ui-grid-unstable.css" rel="stylesheet">
and it worked!
Strangely, if I copy and paste the code from that link and paste it in my local ui-grid-unstable.css, the characters are still the korean-looking ones...

A nice and working solution is to replace the code in css file like this:
.ui-grid-icon-down-dir:before {
content: '\25bc';
}
.ui-grid-icon-up-dir:before {
content: '\25b2';
}
The original content '\c358' and '\c359' will display the korean-looking ones in IE.

font uri path not found in your project.follow the folder structure as same in git. if you still face same problem use updated angular ui grid version.
custom column header template is another way to resolve the sort icon problem.
This is default header template code:
<div ng-class="{ 'sortable': sortable }">
<div class="ui-grid-cell-contents" col-index="renderIndex" title="TOOLTIP">
<span>{{ col.displayName CUSTOM_FILTERS }}</span>
<span ui-grid-visible="col.sort.direction" ng-class="{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }">
</span>
</div>
<div class="ui-grid-column-menu-button" ng-if="grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false" ng-click="toggleMenu($event)" ng-class="{'ui-grid-column-menu-button-last-col': isLastCol}">
<i class="ui-grid-icon-angle-down"> </i>
</div>
<div ui-grid-filter></div>
</div>
From default template just replace your own css class by 'ui-grid-icon-up-dir' for up icon and 'ui-grid-icon-down-dir' for down icon.

You need to go to the version folder, download the following files :
ui-grid.eot
ui-grid.svg
ui-grid.ttf
ui-grid.woff
and place in the same local folder where ui-grid.css file is stored.
e.g. if you are using ui-grid.js and ui-grid.css version 4.0.4 you will need to download the above mentioned files from
https://github.com/angular-ui/ui-grid.info/tree/gh-pages/release/4.0.4
and place in the same local folder where ui-grid.css file is stored. You don't need to reference these 4 files in your code explicitly.
Hope this helps.