I am using Vue 2.6.14
I wrote the following in my Single File component:
<style scoped src="#/common/assets/landing/Land.css" />
in order to include a pre-existing file.
Because I want the style to apply to this component only, I used this scoped attribute.
It works perfectly when I run my app with vue-cli-service serve and when I compile in dev mode with vue-cli-service build --mode=preprod.
However, as soon as I compile in prod mode with vue-cli-service build, it doesn't work anymore as intended: the style apply globally on all pages of the application.
I can't find anyone having the issue on the Internet.
Can someone help me?
Because compilation is working as intended in dev mode but not in prod mode, I think it should be a bug in the compiler.
Thank you very much for your help
Try it
<style scoped>
#import '~#/common/assets/landing/Land.css';
</style>
Eventually: it appeared that every random CSS file located in the #/common/assets/ is included globally by the production builder.
It makes no sense at all to me, I believe it's a bug of the compiler.
Whatever it closes the issue.
Related
I experience problem with Vuetify.js v2.2. When I use container, row or col classes. These styles works fine on 'dev'.
Once I build npm run build the project, these styles are not applied anymore.
I could use workaround noted here https://github.com/vuetifyjs/vuetify/issues/8013#issue-472862385, but as mentioned https://github.com/vuetifyjs/vuetify/issues/7978 this should not be the case anymore.
Anybody experienced the same and found official solution?
Examples below:
Live https://www.exchangehours.com/
Local Dev (sorry, no public domain)
The problem was in my lack of knowledge of VuetifyJs and te Vue itself.
# What I used
<div class="container"> </div>
# What needs to be used
<v-container> </v-container>
I did not check it directly, but my bet is that tree shaking logic of VuetifyJs is the cause. Where on dev you have loaded all vue css & js but after build just needed css & js is added to chunk.js / chunk.css files.
Therefore if you do not use Vue components to create container or other grid elements, styles are not included to chunk.
So all works perfectly fine if you follow docs completely.
I have a #vue-cli generated project that I need to port over to a simple "three file" setup (ie only index.html, index.js, and index.css) so I can showcase portions of it on Codepen.
However, I'm having a hard time disentangling the "cli" structure of the app. The main issue seems to be two-fold:
CLI is wired to use single-file components whereas Codepen expects everything to be included "in-line" within the js file
Webpack is working its magic in the background to compile everything together based on CLI's single-file component structure, etc.
For example, within the main.js file, a CLI app imports various Vue related modules, then initializes the Vue instance with
new Vue({
render: h => h(App)
}).$mount('#app')
This, of course, corresponds with the content of the index.html
...
<div id="app"></div>
Right now I'm manually copying and pasting things over into Codepen, but that dev environment is just atrocious for any type of serious editing and manipulation... So that's why I'd like to build it out and test stuff OUTSIDE of Codepen, then paste it all in once I'm happy with the results.
I've tried pulling all of the component code into main.js using the standard Vue.component('<name>', { <options> }) syntax, but it's not playing well...
Any ideas? Thanks for the help, sorry for such a broad question!
PS: OR! Maybe I'm going about it the wrong way. Rather than try to "de-CLI" a CLI app structure, how could I create a simple "three-file" Vue app with the comforts of things like npm run serve with hot-loading to see things in action on the page?
I want to create a npm module for other projects shared at our repository. My "library" contains some vue.js basic components and some SCSS. I want to reuse this basic scss and the components.
I do use the same SCSS in my components too. Following an example excerpt from a library component:
<style scoped lang="scss">
#import "./src/assets/css/variables.scss";
....
</style>
Now I want to reuse this component inside my main project but the sass loader fails by referencing this variables.scss (inside my library module). Well this path obviously can't work. I should do something like "../assets/css/variables.scss" to work both in library build as in project build... what has some caveats too when I use nested folders.
I'm wondering to find so little information about it in the internet. Could some one give me an advice of "how to do it right"?
Thanks in advance!
If I understand you correctly, you want to import your variables sass file to your "sub project".
In that case, when you have built your npm "library" package, you can reference it by package name in the sub project you install it to:
<style scoped lang="scss">
#import "library-name/assets/css/variables.scss";
....
</style>
I've got a running Vue app created with Vue CLI 4 and also installed Tailwind CSS with the help of this tutorial. Since I want to put my custom components into single files and write them in SCSS, my tailwind config file looks like
// tailwind.scss
#tailwind base;
#tailwind components;
#import '#/assets/scss/components/button.scss';
#tailwind utilities;
While serving the app with vue-cli-service serve or building it with vue-cli-service build works great, I am missing the autocompletion feature of my IntelliJ IDEA for all the tailwind classes so that I don't have to use (even tough great) cheat sheets like this.
My idea is to introduce a npm script that will build the full tailwind.css, so that the IDE can utilize it when autocompleting css classes. I know that I can manually build such file with npx tailwindcss build tailwind.scss -o tailwind.css.
However, although that gives me autocompletion for the built-in tailwind classes, it of course neither compiles the SCSS in my custom components nor does it resolve the #import at all. A solution could be to 1) resolve the #import, 2) compile the SCSS to CSS and 3) use the aforementioned tailwindcss build to finally build the full tailwind.css.
Since I am very inexperienced with Webpack, I wonder if you can give me some hints of how to achieve this. Would you even use Webpack for this task?
Webpack is definitely the way to go here, I use this config all the time. See the Tailwind documentation page for setup documentation with webpack
Don't worry about autocomplete for Tailwind, you will learn those classes in no time plus their docs and search function on there are brilliant, no need for external cheatsheets imho.
If you're using post-cssimport you need to put the #import statement before everything else. Check out https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
I'm working on a vue.js app. It runs fine in DEV mode, but fails to include / parse my scss while Building (npm run build). I'm using the the Vue PWA template (https://github.com/vuejs-templates/pwa)
My scss is included in the App.vue file like so:
<style lang="scss" src="./styles/app.scss">
I've haven't changed anything in the build/config files.
Should i add my app.scss file as a seperate entry point, I'm quite lost here..|
Thank in advance
Assuming that your node-sass and sass-loader is already setup correctly.
You can use the following way to import your sass file
<style lang="scss">
#import "./path/to/scss"
</style>