I'm trying to use SCSS to style my elements in vue-native project. I just created a fresh project and ran it with Expo and it ran just fine. Then in my App.vue I tried to change <style> to <style scoped lang='scss'> and my app crashed.
I didn't find anything about SCSS in vue-native documentation. So I tried to follow the vue.js docs, I installed sass-loader with npm install -D sass-loader sass, installed fibers... and my app couldn't compile.
So does vue-native support working with SCSS at all? And if it does - how? What did I do wrong?
Vue native is just a wrapper for React Native. React Native doesn't support CSS or SCSS as it has its own StyleSheet system as you are writing native code and styling.
In response to your comment, vue native compiles css-like styles to react native styling, so you can still use vue-native instead of directly writing JS!
Related
Problem Background:
I have a tauri app set up in Linux (Pop OS), with sveltekit with vite as the frontend framework, and typescript and SCSS being the languages I code for scripts and styles.
Vite is also hot reloadable.
There's an app.scss for overall styles and components scoped scss defined in each components using the <style lang="scss"> tag
Problem Description:
When I run the pnpm tauri dev command, the built executable will be executed for development debugging.
While the scss file app.scss and some component scss is being loaded, other components scss seems to be not working. (See image below)
Since it is using vite as a dev server, I used a browser to visite the website and see if it is a tauri issu, and the webpage in browser seems to be having different components that doesn't load SCSS as expected. (See imaghe below, the palce holder image should have paddings around it but it doesnt)
When I try to update the SCSS for the components then undo the changes, after hot reload, the scss would work again, so there shouldnt be a mistake in my scss syntax or such.
There's also no error when building the application.
I recently pushed my projects to the hosting sites but some css arent working. After some inspecting, I found out that <script src="https://cdn.tailwindcss.com/?plugins=forms"></script> are showing errors. It says that cdn.tailwindcss.com should not be used in production.. I installed the tailwind cli according to the documentation. But if I delete the script the css doesnt work, what should i replace that <script src="https://cdn.tailwindcss.com/?plugins=forms"></script> with?
When I create a fresh vue-cli project via this command
vue create hello-word
and this command to install vuetify
vue add vuetify
Then I saw my git changes like this
Two new dependencies have been installed in package.json.
vue-cli-plugin-vuetify
vuetify-loader
At first glance, I thought vue.config.js has specified using these two, but it's content only have these code.
module.exports = {
"transpileDependencies": [
"vuetify"
]
}
So, how does vue-cli know I've installed this new vuetify loader?
Does it automatically pick those up?
After running vue add vuetify choose Vuetify 3 if you are using Vue 3:
vuetify-loader is a treeshaking plugin for Webpack. It gets installed automatically when you install Vuetify using "vue add vuetify".
So, vuetify-loader is used by Webpack for treeshaking the Vuetify components to only include the ones that you imported in your app. This way Webpack should be able to lower your build size by importing only the required components, and not all the Vuetify components.
See Vuetify Treeshaking
And this is the vuetify-loader project on Github
i can not figure out why, my new laravel installation with ui bootstrap, is loading bootstrap before jquery and popper, which means stuff like bootstrap toogle dosent work. The builded js file has first bootstrap then jquery and last popper, anyone has an idea why it is doing that?
Turns out the current laravel jquery vesion has a bug. The latest jquery vesion 3.5.1 fixes it, so running:
npm install jquery#3.5.1
npm run dev
should work.
At Codelyzer test file I saw SCSS beeing used in a styles inline template. Is it possible to enable it with Angular CLI?
My SCSS setup is working when using styleUrls but not for direct styles component decorator property.
Update:
I am using Angular CLI 1.0.0 with Angular 4.0.1
This is the error in shown in the WebStorm IDE
Support for inline SCSS in #Component decorator styles field is available from Angular v12
To enable in existing applications add "inlineStyleLanguage": "scss” to angular.json in the following sections
architect.build.options
architect.test.options
For a new Angular CLI project where scss is the selected style the inlineStyleLanguage configuration will default to scss
Unfortunately, (at this moment) it is not possible. From the Angular documentation:
Style strings added to the #Component.styles array must be written in CSS because the CLI cannot apply a preprocessor to inline styles.
https://angular.io/guide/component-styles#non-css-style-files