I am trying to install and use the Salesforce Lightning Design System for my apps styles. But it just doesn't work. My steps (I am using vue-cli 3.4.0 + typescript):
npm install #salesforce-ux/design-system --save
At first I imported it into the styles of my App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<style>
#import url("/node_modules/#salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css");
body {
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg stroke='%23CCC' stroke-width='0' %3E%3Crect fill='%23F5F5F5' x='-60' y='-60' width='110' height='240'/%3E%3C/g%3E%3C/svg%3E");
}
</style>
Then I added the classes to a simple button:
<button class="slds-button slds-button_brand" #click="createTask">Save</button>
This does nothing. Classes are applied, but no styling.
I tried adding it to my main.ts:
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import '../node_modules/#salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css'
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
This makes the whole build fail because it says it can't resolve the module:
./src/main.ts
Module not found: Error: Can't resolve '../node_modules/#salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css' in '/usr/src/app/src'
This happens even though the dependency is in my package.json and the autocomplete in vscode shows me the relative path. I've tried diferent relative paths and none of them work. What's going on here?
Related
I have configured a Vue3 + Quasar project via vue add quasar. I can't undersand how to use quasar sass/scss variables.
From the doc I'm expected to use
<style lang="scss">
div {
color: $red-1;
background-color: $grey-5;
}
</style>
but it causes a Undefined variable. error due to $red-1. If I explicitly import the styling file, I am able to use variables from there, such as $primary, but no luck with other Quasar variables.
<style lang="scss">
#import './styles/quasar.variables.scss';
div {
color: $primary;
}
</style>
Shall I explicitly import all the variables from Quasar sass/scss too?
My project is configured like:
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
import { Quasar } from 'quasar'
import quasarUserOptions from './quasar-user-options'
const app = createApp(App)
app.use(Quasar, quasarUserOptions)
app.mount('#app')
Side question: when using css classes from Quasar, bg-primary and bg-secondary use Quasar-defined primary and secondary color instead of my styling choices. Is it the expected behavior?
Sass/SCSS variables are only available with quasar-cli managed apps.
https://quasar.dev/style/sass-scss-variables
I use CSS modules in my React app. Today I was trying to code and had to upgrade some dependencies - react from 17.0.1 to 17.0.2, react-scripts from 4.0.3 to ^5.0.0, eslint from ^7.32.0 to 8.0.0 - and I had a bunch of errors. I managed to fix a lot of them, but I'm getting a lot of errors like this one:
export 'headerImageWrapper' (imported as 'headerImageWrapper') was not found in './Header.module.css' (possible exports: default)
I've been importing destructured classes from CSS modules - and it was working until today.
import React from 'react';
import logo from '../../assets/logo.png';
import {
headerWrapper,
headerImageWrapper,
headerLogo,
headerTitleWrapper,
} from './Header.module.css';
export default function Header() {
return (
<div className={headerWrapper}>
<div className={headerImageWrapper}>
<img className={headerLogo} src={logo} alt="Logo" />
</div>
<div className={headerTitleWrapper}>
<p>Biblioteca</p>
<p>Colégio</p>
</div>
</div>
);
}
It does work when I import it as "styles", but I wanted to keep it destructured so I didn't have to use "styles.headerWrapper"
I am getting this same error and don't want to revert to styles.myStyle. So right now I am still importing the entire styles object, import styles from "./blah.module.css", but then I deconstruct the variables after const {styleOne, styleTwo} = styles;. This allows you to keep everything else the same, but still kinda annoying.
I am currently working on a project with Vue 3 and Element Plus.
As of the moment, the element plus Icons are not showing on my app.
I have installed them with yarn using
$ yarn add #element-plus/icons
and I have no idea what to do next.
I have tried importing it on my main.ts file.
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import "#element-plus/icons";
createApp(App).use(store).use(router).use(ElementPlus).mount("#app");
But it is not showing still.
The #element-plus/icons package contains named exports for each icon found in the Icon Collection. For example, to use the MagicStick icon, import it by name, and register it as a component. In Vue 3, you can use a <script setup> block to locally register the component simply by importing the component:
<script setup>
import { MagicStick } from '#element-plus/icons-vue'
</script>
Then use it as a component in your template:
within <el-icon>, which lets you easily specify the icon's size and color as props
Note: Clicking an icon card from the Icon Collection UI automatically copies boilerplate markup (<el-icon><magic-stick/><el-icon>) to your clipboard for easily pasting it into your own file.
<template>
<el-icon :size="100">
<MagicStick />
</el-icon>
</template>
or standalone, which requires applying your own styles:
<template>
<MagicStick class="icon" />
</template>
<style scoped>
.icon {
color: #f00;
height: 200px;
}
</style>
demo
I tried importing my App. vue file inside app.js like this:
import Vue from 'vue';
import App from './App';
new Vue({
el: '#app',
render: h => h(App)
});
My App.vue file:
<template>
<div>
<h2>My Application</h2>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
This doesnt work an gives me this error:
"export 'default' (imported as 'App') was not found in './App'
However, if I add .vue inside my import it suddenly works just fine. In other tutorials I found for Symfony and vue it works fine without having to add .vue. Any reason as to why it's not working for me?
I have started working on reactJS. I was watching a tutorial where Css was passed separately to jsx component and I tried doing the same but failed. There is no error, But the changes in CSS is not getting implemented.
I even installed loaders after this but not getting any result
npm i css-loader style-loader --save-dev
yarn add --dev css-loader style-loader
App.js
import React, { Component } from 'react';
import{Form, FormControl, Button} from 'react-bootstrap';
import './App.css';
class App extends Component{
render(){
return(
<div ClassName = "App">
<Form inline>
<h2>Input your Birthday! </h2>
<FormControl type = "date">
</FormControl>
{' '}
<Button>
Submit
</Button>
</Form>
</div>
)
}
}
export default App;
App.css
.App{
padding: 5%;
text-align: center;
font-size: 16px;
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<App />, document.getElementById("root")
)
To start off, you need to import App.js in index.js ( I dont know why it is not throwing an error).
Secondly for the styles, I tried to change the class name from "App" to "app" and it works fine now. I am not sure ofthe reason tho, but it maybe something to do with "App" being reserved.
Here is code sandbox