Here is my file structure in sapper a project (only relevant files):
src/
-routes/
-_layout.svelte
-index.svelte
-other.svelte
-styles/
-index.css
-other.css
I import the css files by this method:
<script>
import '../styles/index.css'
</script>
I use header selector in both css files. When I route from index to other page the index.css's header styles also applied in the other.svelte page. But if I refresh in /other page in my browser it looks okay.
I want to scope my styles in a specific page. How to restrict my styles for other pages?
Here is my dependencies from package.json:
"dependencies": {
"compression": "^1.7.1",
"polka": "next",
"sirv": "^1.0.0"
},
"devDependencies": {
"sapper": "^0.28.0",
"svelte": "^3.17.3",
"#babel/core": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-transform-runtime": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/runtime": "^7.0.0",
"#rollup/plugin-babel": "^5.0.0",
"#rollup/plugin-commonjs": "^14.0.0",
"#rollup/plugin-node-resolve": "^8.0.0",
"#rollup/plugin-replace": "^2.2.0",
"#rollup/plugin-url": "^5.0.0",
"rollup": "^2.3.4",
"rollup-plugin-svelte": "^6.0.0",
"rollup-plugin-terser": "^7.0.0"
}
The simplest way to define route-specific styles is to write your css directly in the <style></style> section of your Sapper route files (in your case, index.svelte and other.svelte).
These styles will have precedence over the global.css stylesheet which is loaded from template.html (if you use the Sapper template app).
Related
I installed storybook by using npx tsdx create
and selected react-with-storybook to make style component library.
while developing, I got 'This story is not configured to handle controls. ' error.
tsdx automatically installs all the essential addons include storybook controls.
So there's no reason to get this error.
After searching about this, I found this post.
Long story short, This error is about storybook dependency version.
They said, If I downgrade version under 6.0.9, it would works find.
So I tried, and this time I couldn't even start the project. (build failed or something).
This is my devDependencies from package.json
"devDependencies": {
"#babel/core": "^7.17.2",
"#size-limit/preset-small-lib": "^7.0.8",
"#storybook/addon-essentials": "^6.4.13",
"#storybook/addon-info": "^5.3.21",
"#storybook/addon-links": "^6.4.13",
"#storybook/addons": "^6.4.13",
"#storybook/react": "^6.4.13",
"#types/react": "^17.0.39",
"#types/react-dom": "^17.0.11",
"babel-loader": "^8.2.3",
"husky": "^7.0.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-is": "^17.0.2",
"size-limit": "^7.0.8",
"tsdx": "^0.14.1",
"tslib": "^2.3.1",
"typescript": "^4.5.5"
}
and What I changed were
"devDependencies": {
"#babel/core": "^7.17.2",
"#size-limit/preset-small-lib": "^7.0.8",
"#storybook/addon-essentials": "6.0.9", <<=
"#storybook/addon-info": "^5.3.21",
"#storybook/addon-links": "6.0.9", <<=
"#storybook/addons": "6.0.9", <<=
"#storybook/react": "6.0.9", <<=
"#types/react": "^17.0.39",
"#types/react-dom": "^17.0.11",
"babel-loader": "^8.2.3",
"husky": "^7.0.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-is": "^17.0.2",
"size-limit": "^7.0.8",
"tsdx": "^0.14.1",
"tslib": "^2.3.1",
"typescript": "^4.5.5"
}
If you know any workaround, please share! Thanks!
In my case this error was caused from another story, which had a control that had incorrect options, here is the web component
export default {
title: 'Buttons/HTMLButton',
argTypes: {
sizeClass: {
control: { type: 'select' },
options: { '': '', Huge: 'huge-size' }
},
},
};
As soon as I fixed the options to { 'Default': '', Huge: 'huge-size' } it fixed this issue.
Even though this story was completely different, but it was causing controls to disappear in a different story, at the same time the controls are available and working in the Docs tab, but in the main Canvas you will see no controls and with error This story is not configured to handle controls..
To debug this issue, I had to move all stories to a different location, bring back stories one-by-one to see which is causing the problem.
Not too often but sometimes I have faced this funny behaviour of storybook, where an issue will lead to a completely different and misleading error.
I'm a FE dev who just inherited a very large ReactJS/Gatsby project that has the following files in ./src/scss/
_base.fonts.scss
_base.forms.scss
_base.headings.scss
_base.links.scss
_base.lists.scss
_base.main.scss
_base.media.scss
_base.tables.scss
_base.text.scss
_generic.reset.scss
_layout.grids.scss
_layout.wrappers.scss
_modifier.animations.scss
_modifier.colors.scss
_modifier.display.scss
_modifier.spacing.scss
_module.article.scss
_module.footer.scss
_module.header.scss
_module.main.scss
_objects.blocks.scss
_objects.buttons.scss
_objects.cards.scss
_objects.forms.scss
_objects.icons.scss
_objects.images.scss
_objects.lists.scss
_objects.messaging.scss
_objects.navs.scss
_objects.search.scss
_objects.sections.scss
_objects.text.scss
_settings.variables.scss
_tools.include-media.scss
_tools.mixins.scss
_tools.mq-tests.scss
_tools.sg-updates.scss
_trumps.helper-classes.scss
_vendor.animate.scss
_vendor.modal-video.scss
_vendor.sal.scss
_vendor.slick.scss
main.scss
styleguide.min.scss
The guy who built and maintained this project was terminated today, and this project was dumped on me. The React project I've been working with for the last few years doesn't use SCSS at all, and I have very little time to ramp up on this; I have maintenance tickets that are due in just a couple of days.
Is this a framework? If so, I need to find documentation so I can quickly get up to speed.
For example, one of the first tickets I have is changing the content of this <Section from justify-content: center to justify-content: flex-start. Easy enough, but with all of these classes, I want to make sure I'm making the change correctly so that I don't jig something up.
<Section className="c-hero__header c-hero__header--resources u-padding--quad--top u-space--quad--bottom u-padding--section u-box-shadow"> ... </Section>
Edited to add: Here are the dependencies from package.json:
"dependencies": {
"algoliasearch": "^4.9.1",
"animate.css": "^4.1.1",
"classnames": "^2.3.1",
"fs-readdir-recursive": "^1.1.0",
"gatsby": "^3.6.2",
"gatsby-image": "^3.6.0",
"gatsby-plugin-image": "^1.6.0",
"gatsby-plugin-manifest": "^3.6.0",
"gatsby-plugin-preact": "^5.7.0",
"gatsby-plugin-react-helmet": "^4.6.0",
"gatsby-plugin-react-helmet-canonical-urls": "^1.4.0",
"gatsby-plugin-sass": "^4.6.0",
"gatsby-plugin-sharp": "^3.6.0",
"gatsby-plugin-sitemap": "^4.2.0",
"gatsby-remark-images-contentful": "^4.3.0",
"gatsby-source-contentful": "^5.6.1",
"gatsby-transformer-remark": "^4.3.0",
"gatsby-transformer-sharp": "^3.6.0",
"gatsby-transformer-sqip": "^3.6.0",
"html-to-article-json": "^1.20.1",
"instantsearch.css": "^7.4.5",
"moment": "^2.29.1",
"node-sass": "^6.0.0",
"onscroll-effect": "^1.3.1",
"preact": "^10.5.13",
"preact-render-to-string": "^5.1.19",
"prop-types": "^15.6.2",
"react": "^17.0.2",
"react-animate-on-scroll": "^2.1.5",
"react-cookie-banner": "^4.1.0",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-html-parser": "^2.0.2",
"react-inline-script": "^1.2.0",
"react-instantsearch-dom": "^6.11.0",
"react-lazysizes": "^1.0.0",
"react-load-script": "0.0.6",
"react-modal-video": "^1.2.7",
"react-plx": "^1.3.17",
"react-scroll": "^1.8.2",
"react-scroll-toggle": "^1.0.2",
"react-slick": "^0.28.1",
"react-structured-data": "0.0.14",
"react-text-loop": "^2.3.0",
"sal.js": "^0.8.5",
"universal-cookie": "^4.0.4"
}
If someone can just point me to a framework, I can do the rest. Thanks!
If you want to get help from others, you should give some details about your project. You did not mentioned whether any third party plugins have been used. At least you need to look up your package.json file to find out dependancy or share it to let others get to know the detail.
After publishing HTML storybook to DSM, I see "Loading..." but the storybook does not load.
DSM preview displays the storybook but when published. it continues to display the Loading message
package.json
"scripts": {
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook -c .storybook -o .out",
"deploy-storybook": "storybook-to-ghpages",
"dsm-storybook:publish": "dsm-storybook publish",
"dsm-storybook:preview": "dsm-storybook preview"
},
"dependencies": {
"#invisionapp/dsm-storybook": "latest",
"npm": "^6.13.7"
},
"devDependencies": {
"#babel/core": "^7.8.0",
"#storybook/addon-a11y": "^5.3.9",
"#storybook/addon-actions": "^5.3.9",
"#storybook/addon-backgrounds": "^5.3.9",
"#storybook/addon-centered": "^5.3.9",
"#storybook/addon-docs": "^5.3.9",
"#storybook/addon-knobs": "^5.3.8",
"#storybook/addon-options": "^5.3.9",
"#storybook/addons": "^5.3.9",
"#storybook/html": "^5.3.2",
"#storybook/storybook-deployer": "^2.8.1",
"babel-loader": "^8.0.6",
"babel-runtime": "^6.26.0",
"eslint": "^6.8.0",
"jquery": "3.4.1"
},
NOTE: Downgrading storybook to 5.2.1 works. Would like to know the issue with 5.3.9
They don't support yet the 5.3 configuration file structure. Just delete you main.js file and go back to pre 5.3 config.js file.
I created a laravel project using some free bootstrap admin panel and I want to add fontawsome font in my project using a package manager. I read the documentation about it and I followed it correctly but when I do npm run dev it gets me an error of Can't find stylesheet to import.
#import "~#fortawesome/fontawesome-free";. I can saw the folder of fontawsome and #fortawsome in the node_modules folder but when I crtl+click some of the import statement, it shows that the file cant be found. Can someone help me with this? I am using the latest version of fontawsome and 5.8 version of laravel.
app.scss
// Fonts
#import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
#import 'variables';
$fa-font-path: "../webfonts";
#import "node_modules/font-awesome/scss/font-awesome.scss";
// Bootstrap
#import '~bootstrap/scss/bootstrap';
// adminlte
#import '~admin-lte/dist/css/adminlte.css';
#import "~#fortawsome/fontawesome-free/scss/fontawesome.scss";
#import "~#fortawsome/fontawesome-free/scss/solid.scss";
#import "~#fortawsome/fontawesome-free/scss/brands.scss";
package.json
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.9.0",
"axios": "^0.19",
"bootstrap": "^4.1.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"admin-lte": "^2.4.15"
}
I solved it. It was a typo error. I wrote fortawsome instead of fortawesome.
The button background is red, when it should be green
i.e. the conditional styling controlled by :host-context is not activated?
Child component styles commander.scss
commander {
button {
background-color: red;
}
:host-context(.enough-space) .btn-theme {
background-color: green;
}
}
Child component template commander.html
<button class="btn-theme" (click)="demand()">{{requestText}}</button>
Host component template front.html
...
<commander (command)="requestPage()" [requestText]="requestText"></commander>
Host component code front.ts
#Component({
selector: "page-front",
templateUrl: "front.html",
host: {'class': 'enough-space'}
})
export class FrontPage {
...
}
Much of this is based on https://blog.angular-university.io/angular-ngclass-ngstyle/ so it should work - the only real differences I can see is that I have separate files for the templates and styles and I am using Angular within Ionic.
Packages used
"#angular/common": "5.0.0",
"#angular/compiler": "5.0.0",
"#angular/compiler-cli": "5.0.0",
"#angular/core": "5.0.0",
"#angular/forms": "5.0.0",
"#angular/http": "5.0.0",
"#angular/platform-browser": "5.0.0",
"#angular/platform-browser-dynamic": "5.0.0",
"ionic-angular": "3.9.0",
Works in different environment
Here is the same code in stackblitz, and it is working fine, the button is green as it should be: https://stackblitz.com/edit/ionic-host-context
The only differences I can see is that stackblitz uses Angular 4.1.3 and Ionic 3.5.2? Although I am not sure how exactly they have set up the rest of their environment.