For the past 2 days, I've been trying to figure out how to import a global stylus file into all of my components so that I don't end up with `#import '../../../styles.styl' in each component or ever need to adjust that. I've used the configuration given by VueJS here and I still can't figure it out. I've tried various different configurations, but every time it either doesn't recognize 'style-resources-loader' and gives me an error before even building, or it seems to build and then errors out because it doesn't recognize the stylus variables I'm using in my components. Giving me this error:
Module build failed (from ./node_modules/stylus-loader/index.js):
Error: C:\filepath\ViewTitle.vue:27:25
23| color white
24| font-family 'Xiomara'
25| letter-spacing 0.25rem
26| text-align center
27| text-shadow 0 0 8px rgba(light, 0.1)
-------------------------------^
28| </style>
TypeError: expected rgba or hsla, but got function:light(color)
I've also tried the css: { loaderOptions: { stylus: prependData: "#import './assets/styles/styles.styl'" } } } and that has not worked either. Any thoughts?
Edit:
This is what my variables look like:
peppermint = #FBAAA6
dusk = #135A8B
gold = #F0D355
dark = #062236
light = #EFF2F3
I have them stored in ./assets/styles/config/vars.styl, then the file I'm trying to import is in ./assets/styles/styles.styl and that file imports the vars.styl
Solution:
For anyone having the same issue, I ended up just starting over. Luckily I wasn't too deep into the project, so it only set me back a few hours. Using the code in the Auto Import section of the VueJS documentation worked fine after starting fresh.
Related
I have expo 30 proyect and the fonts ( fontello icons ) load succesful now 3 months later I reopen the proyect before update expo and fonts does´t load even if I create a new proyect the fonts does´t
(I have already changed the import from
import { Font } from 'expo';
to
import * as Font from 'expo-font';)
here's a snack with the problem https://snack.expo.io/#emmalv/bold-banana
it's curious that in expo-cli when I run the same code and print the state of loading first return false and before true and inmediately show red screen saying that font has not been loaded through Font.loadAsync
I've tried wirtting everything in the app class instead of loading the fonts from another file and the behavior is the same
other thing I've tried is like the new documentation says, use expoAssetId
const expoAssetId = require("assets/fonts/custom-icon-font.ttf");
const Icon = createIconSetFromFontello(fontelloConfig, 'FontName', expoAssetId);
but I get another error
C.replace is not a function. (In 'C.replace(/\.(otf|ttf)$/,'')', 'C.replace' is undefined)
Expected Behavior
the icons load and show correctly
Actual behavior
when load throw an exception 'fontFamily "../assets/fonts/sowaicons" is not a system font and has not been loaded through Font.loadAsync.' and show a square instead of the icon
Enviroment
Windows 10
sdkVersion: 35.0.0,
expo: ^35.0.0",
expo-font: ~7.0.0
I created working example:
https://snack.expo.io/#djalik/custom-fonts
change CustomIcon code:
import { createIconSetFromFontello } from '#expo/vector-icons';
import fontelloConfig from '../assets/fonts/config.json';
// const ttf = require("../assets/fonts/sowaicons.ttf");
// import myfont from "../assets/fonts/sowaicons.ttf";
const Icon = createIconSetFromFontello(fontelloConfig, 'sowaicons');
and replace this.state.setState... to this.setState
I want to make a progress bar with background linear-gradient and use pre-defined theme colors in scss in vue. Such as:
.progress{
background-image: linear-gradient(to right, $start-color 0%, $start-color 50%, $end-color 50%, $end-color 100%);
}
50% is dynamic changed by code in vue. If I write the style in :style="{}" then I can't use the pre-defined scss color $start-color and $end-color
You should use the :export block from Interoperable CSS under CSS modules.
As an example consider the below given extracts, first in your sass file that has colors defined (say colors.scss):
$primaryColor: #fcf5ed;
$secondaryColor: #402f2b;
:export {
primaryColor: $primaryColor;
darkColor: $secondaryColor;
}
With that setup along with your style loaders (which you currently must have setup) you can just import the file like usual js modules like below in your Vue application:
import colorVariables from 'colors.scss'
colorVariables.primaryColor // => Will now have the value of the color as a string.
Now you can just use the :style binding of the Vue to define the linear-gradient. You can read more on export in the following link : Interoperable CSS - :export under CSS modules.
I want to use a custom font in a QML application, and to not have to specify it in every text field, I use a component as suggested in this answer.
I have a DefaultText.qml under a styles prefix in my qml.qrc, which resides in the folder styles.
import QtQuick 2.0
Text {
color: "black"
font.family: myCustomFont.name
font.bold: false
font.italic: false
font.pixelSize: 14
}
I use it, among other places, in a qml named PanelRight.qml, under the prefix Panels in the folder widgets. It's all under the same qml.qrc.
import "qrc:/styles/styles"
Item
{
// ...
DefaultText { text: "xyz" }
}
Interestingly, DefaultText is underlined as an error, with the message "Unknown component. (M300)". However, I can successfully compile and run my application, and the custom font is displayed correctly. However, it's annoying that I have a long list of errors (I intend to use it in a lot of places) and that autocomplete doesn't work.
I searched the Qt forums, this problem was mentioned there in case of custom plugins, which I don't use.
Add relative path of DefaultText.qml in PanelRight.qml file as
import "../styles"
import QtQuick.Controls.Material
Some Ext JS container exposes CSS variables without any mixin. For example, fieldcontainer. In my custom theme I want to style two fieldcontainers differently using the available CSS variables for fieldcontainer.
I know it can be done by applying CSS. Is there a way to achieve it by setting the CSS variables?
For example,
.my-class-one {
$form-label-font-color: #FFFFFF
}
.my-class-two {
$form-label-font-color: #000000
}
Is it possible? If possible, where do I put this code?
You could do something like that:
Define a style in the sass/src/ folder:
.my-class-one .x-form-item-label{
color: $my-class-one-label-color;
}
.my-class-two .x-form-item-label{
color: $my-class-two-label-color;
}
...and initialize the variables in the sass/var/ like this:
$my-class-one-label-color: #FFFFFF;
$my-class-two-label-color: #000000;
You should put your scss variables in the sass/var/ folder and your styles in the sass/src/ folder.. And in these two folders keep the same structure as in your app folder. so if you write a style for your view in app/view/Home.js so place your style in the sass/src/view/Home.scss file.
Useful link: http://docs.sencha.com/extjs/4.2.1/#!/guide/theming
Above approach should work though i personally avoid adding style to internal class names.
Another approach could be defining a new UI for your container.
Have a look at:
Creating Custom Component UIs section in theming guide.
How can I set Ext CSS to be just applied to Ext components?
This is what is mentioned in Ext documentation for scopeResetCSS:
scopeResetCSS : Boolean
True to scope the reset CSS to be just applied to Ext components.
Note that this wraps root containers with an additional element.
Also remember that when you turn on this option, you have to use ext-all-scoped
{ unless you use the bootstrap.js to load your javascript, in which case it will be
handled for you.
I have already set Ext.scopeResetCSS=true; & also Replaced the ext-all.css with ext-all-scoped.css, but that does not help.
Thanks to Donald Sipe for posting the solution for this in his blog.
You should create Ext object in the following manner before it is loaded by ext-debug.js script:
<script>
// Here we define Ext for the first time
Ext = {
buildSettings:{
"scopeResetCSS": true // Thanks, but I'll do my own scoping please
}
};
</script>
<script src="js/libs/ext/4.0.2a/ext-all-debug.js"></script>
By setting the scopeResetCSS value in buildSettings config object, you are telling ExtJS that you are going to handle CSS scoping all by yourself.
For example, to get a scoped version the gray theme:
install Compass
Then, on command line, move to the ExtJs Sass folder e.g. /extjs/resources/sass
duplicate the file ext-all-gray.scss
add the line $scope-reset-css: true; at the top of the file.
Then run: compass compile ext-all-gray-scoped.scss
This will create a file ext-all-gray-scoped.css in the CSS folder which you can now use.