I am trying to use semantic-ui-react in my react-app, but the moment I import the following statement it takes a lot of time to compile and then ultimately throws an error.
I did the following steps:
npm install semantic-ui-react
npm install semantic-ui-css
import 'semantic-UI-css/semantic.min.css'
I know this is the issue because everything works if I comment this import statement.
My package.json looks like below:
"dependencies": {
"#aws-amplify/ui-react": "^1.2.26",
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.1.1",
"web-vitals": "^2.1.4"
}
Can someone please help.
Thanks
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).
I'm struggling a lot with how to include Vuetify a default Vue.js project created using WebStorm. It's really to do with how the default Vue.js projects are set up in WebStorm rather than the editor itself as it seems to use an approach different to others I can find. I get errors of "Unknown custom element <v-alert>" (for example). I'm failing to find answers on how to do this because WebStorm's default set-up is different from all the how-tos I can find.
My App.vue file is as follows:
<template>
<div id="app">
<img alt="Vue logo" src="../../assets/logo.png">
<HelloWorld msg="Welcome to your Vue.js app"/>
<v-alert dismissible>Why does this show as an unknown custom element?</v-alert>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld,
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
My main.js file is as follows:
import Vue from 'vue'
import App from './App.vue'
// eslint-disable-next-line no-unused-vars
import Vuetify from "vuetify";
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
My package.json file is like so:
{
"name": "my-vue-app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.4",
"deepmerge": "^4.2.2",
"sass": "^1.26.3",
"sass-loader": "^8.0.2",
"vue": "^2.6.11",
"vuetify": "^2.2.18"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.2.0",
"#vue/cli-plugin-eslint": "~4.2.0",
"#vue/cli-service": "~4.2.0",
"babel-eslint": "^10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.1.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
I ran npm install vuetify which seemed to proceed correctly and I get no errors when building or serving it. But I don't know how to get my Vue app to import the Vuetify components.
All the documentation I can find talks about either instantiating the Vue app directly, which I'm not doing, or else if it talks about single component .vue files the examples all have module.exports which again, I don't have in the project built by WebStorm.
I've tried adding Vuetify as one of the imports in the script section of the App.vue and I've also tried setting Vuetify and v-alert as components in the components section of the App.vue file but can't get either to work. Thanks for any help.
I'm struggling a lot with how to include Vuetify a default Vue.js project created using Webstorm
Just follow the instructions from https://vuetifyjs.com/en/getting-started/quick-start/:
create a new project by either running vue create in terminal or using New > Project > Vue.js in IDE (use the default project setup)
in terminal, run vue add vuetify
My main.js file is as follows:
you didn't register Vuetify (Vue.use(Vuetify); if you don't like to follow the standard way (i.e. use vue add), try the instructions from https://vuetifyjs.com/en/getting-started/quick-start/#webpack-install
I'm attempting to create a standalone version of Wordpress' Gutenberg block editor that will work independently of the Wordpress ecosystem. Ideally, I'd like to be able to simply use the Gutenberg editor in an existing React project as a React component.
I noticed the official repository featured a "storybook" directory which housed a React component at "storybook/stories/playground/index.js":
/**
* WordPress dependencies
*/
import "#wordpress/editor"; // This shouldn't be necessary
import { useEffect, useState } from "#wordpress/element";
import { BlockEditorKeyboardShortcuts, BlockEditorProvider, BlockList, BlockInspector, WritingFlow, ObserveTyping } from "#wordpress/block-editor";
import { Popover, SlotFillProvider, DropZoneProvider } from "#wordpress/components";
import { registerCoreBlocks } from "#wordpress/block-library";
import "#wordpress/format-library";
/**
* Internal dependencies
*/
import "./style.scss";
function App() {
const [blocks, updateBlocks] = useState([]);
useEffect(() => {
registerCoreBlocks();
}, []);
return (
<div className="playground">
<SlotFillProvider>
<DropZoneProvider>
<BlockEditorProvider
value={blocks}
onInput={updateBlocks}
onChange={updateBlocks}
>
<div className="playground__sidebar">
<BlockInspector />
</div>
<div className="editor-styles-wrapper">
<BlockEditorKeyboardShortcuts />
<WritingFlow>
<ObserveTyping>
<BlockList />
</ObserveTyping>
</WritingFlow>
</div>
<Popover.Slot />
</BlockEditorProvider>
</DropZoneProvider>
</SlotFillProvider>
</div>
);
}
export default {
title: "Playground|Block Editor"
};
export const _default = () => {
return <App />;
};
This looked like a perfect candidate to modify into a standalone component, so I modified it slightly so it would function in a new create-react-app project:
import React from "react";
import "#wordpress/editor"; // This shouldn't be necessary
import { useEffect, useState } from "#wordpress/element";
import { BlockEditorKeyboardShortcuts, BlockEditorProvider, BlockList, BlockInspector, WritingFlow, ObserveTyping } from "#wordpress/block-editor";
import { Popover, SlotFillProvider, DropZoneProvider } from "#wordpress/components";
import { registerCoreBlocks } from "#wordpress/block-library";
import "#wordpress/format-library";
import "./style.scss";
export default function App() {
const [blocks, updateBlocks] = useState([]);
useEffect(() => {
registerCoreBlocks();
}, []);
return (
<div className="playground">
<SlotFillProvider>
<DropZoneProvider>
<BlockEditorProvider value={blocks} onInput={updateBlocks} onChange={updateBlocks}>
<div className="playground__sidebar">
<BlockInspector />
</div>
<div className="editor-styles-wrapper">
<BlockEditorKeyboardShortcuts />
<WritingFlow>
<ObserveTyping>
<BlockList />
</ObserveTyping>
</WritingFlow>
</div>
<Popover.Slot />
</BlockEditorProvider>
</DropZoneProvider>
</SlotFillProvider>
</div>
);
}
I saw the component referenced a "style.scss" file (which in turn referenced 'editor-styles.scss' and 'reset.scss') so I copied those files into my new React project as well:
I saw in the "package.json" file in the Gutenberg repository that all of the Wordpress dependencies were being referenced via a "packages" directory, e.g.:
"#wordpress/babel-plugin-import-jsx-pragma": "file:packages/babel-plugin-import-jsx-pragma",
"#wordpress/babel-plugin-makepot": "file:packages/babel-plugin-makepot",
"#wordpress/babel-preset-default": "file:packages/babel-preset-default",
"#wordpress/base-styles": "file:packages/base-styles",
So I copied the "packages" directory from Gutenberg into my new React project and then added all of the Wordpress dependencies to my "package.json" file:
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"#wordpress/a11y": "file:packages/a11y",
"#wordpress/annotations": "file:packages/annotations",
"#wordpress/api-fetch": "file:packages/api-fetch",
"#wordpress/autop": "file:packages/autop",
"#wordpress/blob": "file:packages/blob",
"#wordpress/block-directory": "file:packages/block-directory",
"#wordpress/block-editor": "file:packages/block-editor",
"#wordpress/block-library": "file:packages/block-library",
"#wordpress/block-serialization-default-parser": "file:packages/block-serialization-default-parser",
"#wordpress/block-serialization-spec-parser": "file:packages/block-serialization-spec-parser",
"#wordpress/blocks": "file:packages/blocks",
"#wordpress/components": "file:packages/components",
"#wordpress/compose": "file:packages/compose",
"#wordpress/core-data": "file:packages/core-data",
"#wordpress/data": "file:packages/data",
"#wordpress/data-controls": "file:packages/data-controls",
"#wordpress/date": "file:packages/date",
"#wordpress/deprecated": "file:packages/deprecated",
"#wordpress/dom": "file:packages/dom",
"#wordpress/dom-ready": "file:packages/dom-ready",
"#wordpress/edit-post": "file:packages/edit-post",
"#wordpress/edit-site": "file:packages/edit-site",
"#wordpress/edit-widgets": "file:packages/edit-widgets",
"#wordpress/editor": "file:packages/editor",
"#wordpress/element": "file:packages/element",
"#wordpress/escape-html": "file:packages/escape-html",
"#wordpress/format-library": "file:packages/format-library",
"#wordpress/hooks": "file:packages/hooks",
"#wordpress/html-entities": "file:packages/html-entities",
"#wordpress/i18n": "file:packages/i18n",
"#wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
"#wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts",
"#wordpress/keycodes": "file:packages/keycodes",
"#wordpress/list-reusable-blocks": "file:packages/list-reusable-blocks",
"#wordpress/media-utils": "file:packages/media-utils",
"#wordpress/notices": "file:packages/notices",
"#wordpress/nux": "file:packages/nux",
"#wordpress/plugins": "file:packages/plugins",
"#wordpress/priority-queue": "file:packages/priority-queue",
"#wordpress/redux-routine": "file:packages/redux-routine",
"#wordpress/rich-text": "file:packages/rich-text",
"#wordpress/server-side-render": "file:packages/server-side-render",
"#wordpress/shortcode": "file:packages/shortcode",
"#wordpress/token-list": "file:packages/token-list",
"#wordpress/url": "file:packages/url",
"#wordpress/viewport": "file:packages/viewport",
"#wordpress/wordcount": "file:packages/wordcount",
"concurrently": "^5.0.2",
"css-loader": "^3.4.2",
"node-sass": "^4.13.0",
"node-sass-chokidar": "^1.4.0",
"node-watch": "^0.6.3",
"npm-run-all": "^4.1.5",
"postcss-loader": "^3.0.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0",
"sass-loader": "^8.0.2",
},
"devDependencies": {
"#wordpress/babel-plugin-import-jsx-pragma": "file:packages/babel-plugin-import-jsx-pragma",
"#wordpress/babel-plugin-makepot": "file:packages/babel-plugin-makepot",
"#wordpress/babel-preset-default": "file:packages/babel-preset-default",
"#wordpress/base-styles": "file:packages/base-styles",
"#wordpress/browserslist-config": "file:packages/browserslist-config",
"#wordpress/custom-templated-path-webpack-plugin": "file:packages/custom-templated-path-webpack-plugin",
"#wordpress/dependency-extraction-webpack-plugin": "file:packages/dependency-extraction-webpack-plugin",
"#wordpress/docgen": "file:packages/docgen",
"#wordpress/e2e-test-utils": "file:packages/e2e-test-utils",
"#wordpress/e2e-tests": "file:packages/e2e-tests",
"#wordpress/env": "file:packages/env",
"#wordpress/eslint-plugin": "file:packages/eslint-plugin",
"#wordpress/jest-console": "file:packages/jest-console",
"#wordpress/jest-preset-default": "file:packages/jest-preset-default",
"#wordpress/jest-puppeteer-axe": "file:packages/jest-puppeteer-axe",
"#wordpress/library-export-default-webpack-plugin": "file:packages/library-export-default-webpack-plugin",
"#wordpress/npm-package-json-lint-config": "file:packages/npm-package-json-lint-config",
"#wordpress/postcss-themes": "file:packages/postcss-themes",
"#wordpress/scripts": "file:packages/scripts"
},
Then ran "npm i" so that my React application could reference the Wordpress packages via import statements.
Now, when I run "npm start", the React application will launch in my browser, and the Gutenberg editor will be present, but none of the CSS/styles work:
I'm not entirely sure how to proceed. The application seems to function as desired (I can create, edit, and remove blocks), but the styles simply aren't present.
I attempted to compile the existing scss files (in the src, node_modules, and packages directories) via the following commands in packages.json:
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules --include-path ./packages src packages node_modules -o src --recursive --watch",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules --include-path ./packages -o src --watch"
But the resulting style.css file, when imported to my index.html file, didn't seem to change anything. Any help would be greatly appreciated.
I discovered that there was another style.scss file in the storybook directory which, when placed into the root directory of my React application, along with updating the package.json scripts to:
"build-css": "node-sass-chokidar style.scss -o public/css",
"watch-css": "npm run build-css && node-sass-chokidar --include-path node_modules style.scss -o public/css --watch"
The styles were compiled correctly.
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.