I want to use SCSS in my Svelte application. For this purpose I decided to use svelte-preprocess package. So, this is the App.svelte component :
<script>
</script>
<main>
<h1 class="boom">Hello world!</h1>
</main>
<style type="text/scss">
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
.boom {
color: #ff3e00;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
}
}
#media (min-width: 640px) {
main {
max-width: none;
}
}
</style>
This is the list of dependencies inside of package.json file:
"#rollup/plugin-commonjs": "^16.0.0",
"#rollup/plugin-node-resolve": "^10.0.0",
"#rollup/plugin-replace": "^2.3.4",
"node-sass": "^5.0.0",
"rollup": "^2.34.0",
"rollup-plugin-css-only": "^3.0.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-serve": "^1.1.0",
"rollup-plugin-svelte": "^7.0.0",
"rollup-plugin-terser": "^7.0.2",
"svelte": "^3.30.0",
"svelte-preprocess": "^4.6.1"
And this is the rollup.config.js file:
import svelte from 'rollup-plugin-svelte';
import commonjs from '#rollup/plugin-commonjs';
import resolve from '#rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
// import css from 'rollup-plugin-css-only';
import serve from 'rollup-plugin-serve';
import replace from '#rollup/plugin-replace';
import sveltePreprocess from 'svelte-preprocess';
const isDevelopment = process.env.APP_ENV === 'development';
export default {
input: 'src/index.js',
output: {
sourcemap: false,
format: 'iife',
name: 'app',
file: 'public/js/bundle.js'
},
plugins: [
svelte({
compilerOptions: {
dev: isDevelopment,
},
preprocess: sveltePreprocess(),
}),
// css({output: 'bundle.css'}),
resolve({
browser: true,
dedupe: ['svelte'],
}),
commonjs(),
replace({
IS_DEVELOPMENT: isDevelopment,
}),
isDevelopment && serve({
contentBase: 'public',
historyApiFallback: true,
host: '0.0.0.0',
port: process.env.PORT || 5000,
headers: {
'Access-Control-Allow-Origin': '*',
},
}),
isDevelopment && livereload('public'),
!isDevelopment && terser(),
],
watch: {
clearScreen: false,
},
};
I followed instructions from that package, but when I try building my application I get this error in the console:
rollup v2.34.0
bundles src/index.js → public/js/bundle.js...
[!] Error: Identifier directly after number (Note that you need plugins to import files that are not JavaScript)
src/cmp/App/index.css (1:13)
1: main.svelte-1xjph0n.svelte-1xjph0n{text-align:center;padding:1em;max-width:240px;margin:0 auto}main.svelte-1xjph0n .boom.svelte-1xjph0n{color:#ff3e00;text-transform:uppercase;font-size:4em;font-weight:100}#media(min-width: 640px){main.svelte-1xjph0n.svelte-1xjph0n{max-width:none}}
^
Error: Identifier directly after number (Note that you need plugins to import files that are not JavaScript)
I guess it's a problem with rollup configs or version of some dependency. But how to understand it and how to solve this issue?
The issues lies in you commenting out the line css({output: 'bundle.css'}), in rollup.config.js, with the line present everything works.
Related
I'm having quite a tussle with my code. I've deployed FullCalendar v5 as a Vue 3 component inside a laravel 9 site using Breeze for authentication and Inertia for speedy rendering. I have the Calendar/Pages/Index.vue displaying the calendar and updating events on the calendar with modals from the example, but I cannot manage to get the modals to create events in the database, nor get the events from the database table to display on the calendar. I'm trying to avoid Ajax and use axios to retrieve a JSON feed.
Here's the part of my controller that creates the JSON feed:
public function showEvents(Request $request) {
$event = Event::get(['title','acronym','city','venue','value','start','end']);
return response()->json(["events" => $event]);
}
Here's what the JSON feed returns:
{"events":[{"title":"Test","acronym":"TST","city":"Denver","venue":"Big Venue","value":"$0","start":"2022-10-25 00:00:00","end":"2022-10-28 00:00:00"}]}
And here's my rather massive Calendar/Index.vue:
<template>
<head title="Dashboard" />
<BreezeAuthenticatedLayout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Resource Calendar Timeline
</h2>
</template>
<div class="py-12">
<div class="max-w-10xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-12 bg-white border-b border-gray-200">
<!--start calendar-->
<div class='demo-app'>
<div class='demo-app-main'>
<FullCalendar
class='demo-app-calendar'
:events="calendarEvents"
:options='calendarOptions'>
<template v-slot:eventContent='arg'>
<b>{{ arg.timeText }}</b>
<i>{{ arg.event.title }}</i>
</template>
</FullCalendar>
</div>
</div>
<!--end calendar-->
</div>
</div>
</div>
</div>
</BreezeAuthenticatedLayout>
</template>
<!--start calendar-->
<script setup lang='ts'>
import BreezeAuthenticatedLayout from '#/Layouts/AuthenticatedLayout.vue';
import { head, Link } from '#inertiajs/inertia-vue3';
import '#fullcalendar/core/vdom'; // solves problem with Vite
import { defineComponent } from 'vue';
import FullCalendar, { CalendarOptions, EventApi, DateSelectArg, EventClickArg } from '#fullcalendar/vue3';
import dayGridPlugin from '#fullcalendar/daygrid';
import timeGridPlugin from '#fullcalendar/timegrid';
import listPlugin from '#fullcalendar/list';
import interactionPlugin from '#fullcalendar/interaction';
import axios from 'axios';
</script>
<script lang='ts'>
const Demo = defineComponent({
components: {
FullCalendar,
},
data() {
return {
// trying to pull events from DB json -->>
eventSources: [{
url: 'https://l9-v3-breeze-crud.ddev.site/show-events', // use the `url` property
color: 'yellow', // an option!
textColor: 'black' // an option!
}],
calendarEvents: [{
events(title, start, end, callback) {
axios.get('https://l9-v3-breeze-crud.ddev.site/show-events').then(res => {
callback(res.data.events)
})
},
failure: function() {
alert('there was an error while fetching events!');
},
color: 'red',
textColor: 'white',
}],
//end events pull from DB -->
calendarOptions: {
plugins: [
dayGridPlugin,
timeGridPlugin,
listPlugin,
interactionPlugin // needed for dateClick
],
headerToolbar: {
left: 'promptResource prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
},
initialView: 'dayGridMonth',
events: this.getEvents,
editable: true,
selectable: true,
selectMirror: true,
dayMaxEvents: true,
weekends: true,
select: this.handleDateSelect,
eventClick: this.handleEventClick,
eventsSet: this.handleEvents
} as CalendarOptions,
currentEvents: [] as EventApi[],
}
},
methods: {
getEvents(info, successCallback, failureCallback) {
events(start, end, timezone, callback) {
axios.get('http://localhost:8000/show-events').then(res => {
callback(res.data.eventList)
})
})
},
handleWeekendsToggle() {
this.calendarOptions.weekends = !this.calendarOptions.weekends // update a property
},
handleDateSelect(selectInfo: DateSelectArg) {
let title = prompt('Please enter a new title for your event')
let calendarApi = selectInfo.view.calendar
calendarApi.unselect() // clear date selection
if (title) {
calendarApi.addEvent({
id: createEventId(),
title,
start: selectInfo.startStr,
end: selectInfo.endStr,
allDay: selectInfo.allDay
})
}
},
handleEventClick(clickInfo: EventClickArg) {
if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
clickInfo.event.remove()
}
},
handleEvents(events: EventApi[]) {
this.currentEvents = events
},
}
})
export default Demo
</script>
<style lang='css'>
h2 {
margin: 0;
font-size: 16px;
}
ul {
margin: 0;
padding: 0 0 0 1.5em;
}
li {
margin: 1.5em 0;
padding: 0;
}
b { /* used for event dates/times */
margin-right: 3px;
}
.demo-app {
display: flex;
min-height: 100%;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
.demo-app-sidebar {
width: 300px;
line-height: 1.5;
background: #eaf9ff;
border-right: 1px solid #d3e2e8;
}
.demo-app-sidebar-section {
padding: 2em;
}
.demo-app-main {
flex-grow: 1;
padding: 3em;
}
.fc { /* the calendar root */
max-width: 1200px;
margin: 0 auto;
}
.fc-day-today
{
background-color: var(--fc-today-bg-color, rgba(255, 220, 40, 0.15));
}
.fc-day-sat, .fc-day-sun
{
background-color: var(--fc-today-bg-color, rgba(255, 100, 40, 0.15));
}
</style>
I'm stumped! Either I pull an empty array for events with
events[]
or I get a 500 error denoting that "Module source URI is not allowed in this document: “http://[::1]:5173/resources/js/Pages/Calendar/Index.vue" when I try the axios.get URL
and, not matter what I try, I can't seem to get it to pull the 'calendarEvents' options from
calendarEvents: [{
events(title, start, end, callback) {
axios.get('https://l9-v3-breeze-crud.ddev.site/show-events').then(res => {
callback(res.data.events)
})
},
failure: function() {
alert('there was an error while fetching events!');
},
color: 'red',
textColor: 'white',
}],
Additional Information:
I've been continuing to look for a solution and found several online demo's that resolve the issue at hand, but none with my particular project dependencies. Being a newbie at this, I'm just not certain on how to merge the code. In particular, the structure of the Calendar/Index.vue file taken from the http://fullcalendar.io Vue3 and TypeScript demo here https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/vue3-typescript And in the app.js file from this demo https://www.positronx.io/how-to-display-events-in-calendar-with-laravel-vue-js/
My app.js is complicated by the installation of Ziggy and Inertia and I'm not certain how to construct the Vue rather than a blade. Here's my app.js:
import './bootstrap';
import '../css/app.css';
//import { ZiggyVue } from 'ziggy-vue';
//import route from 'ziggy';
import { createApp, h } from 'vue';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
import { createInertiaApp } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.use(ZiggyVue, Ziggy)
.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });
Ok, I figured out how to use axios to retrieve events from the JSON feed. The issue wasn't in the app.js routes, but rather in the actual Vue component itself.
Previously unmentioned, here is the route that constructs the JSON feed of events:
Route::get('show-events', [CalendarController::class, 'showEvents']);
Here's the part of my controller that generates that JSON feed for events from the database:
public function showEvents(Request $request) {
$event = Event::get(['title','acronym','city','venue','value','start','end']);
return response()->json(["events" => $event]);
And here's the method part of the Vue component that retrieves events from the JSON feel and publishes them to the calendar:
methods: {
getEvents() {
axios.get('show-events')
.then(response => {
this.calendarOptions.events = response.data.events;
});
},
Hei there, I cannot find the solution for my error.
Here is the assets structure:
-| assets
---| scss
-----| _grid_variables.scss
-----| ....
-----| variables.scss
Here is the _grid_variables.scss file:
$mobile-grid: 577px;
$tablet-grid: 768px;
$desktop-grid: 1024px;
Here is the variables.scss file:
#import "_colors_variables";
#import "_grid_variables";
#import "_fonts";
#import "_shadows";
Here is part of the package.json file:
{
...
"devDependencies": {
...
"node-sass": "^4.14.1",
"nodemon": "^1.18.9",
"sass": "^1.43.4",
"sass-loader": "^8.0.2"
}
}
*** I have tried diferent versions of node-sass and sass-loader:
node-sass#6.0.1 + sass-loader#10.2.0
node-sass#6.0.1 + sass-loader#8.0.2
.... and some other tryings
Here is part of my nuxt.config.js:
css: [
'~assets/scss/main.scss'
],
styleResources: {
scss: ['./assets/scss/variables.scss']
},
build: {
rules: [
{
test: /\.s[ac]ss$/i,
use: ['style-loader', 'css-loader', 'sass-loader']
}
],
extend(config, ctx) {}
},
And here is where I am trying to use the variable:
<style lang="scss" scoped>
...
#media screen and (max-width: $mobile-grid) {
.description-row {
text-align: center;
}
}
</style>
I really hope someone can help me to get out from this error.
I've found the solution for my Error:
I was including ./assets/scss/variables.scss in the styleResources in my nuxt.config.js, but I was forgetting to include the '#nuxtjs/style-resources' package (which was correctly installed) in the modules.
You can try this one. Write the following code inside nuxt.confit.js file. Surely it will work.
styleResources: {
scss: [
'~/assets/scss/variables.scss',
'~/assets/scss/_grid_variables.scss'
]
}
I am trying to load a global sass variable file into my Vue style tags. If I am understanding globalVueStyles right, this should Indicate a file to include in every component style. But when I set it up it seems to not do anything and when I run npm run dev I get an undefined variable error.
Here is my laravel mix code:
mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/main.scss', 'public/css')
.options({
extractVueStyles: true,
globalVueStyles: 'resources/sass/utils/_variables.scss',
})
.version()
after doing this I thought I should have access to my variables in my .vue files by doing this:
<template>
<h1>Example Component hi test</h1>
</template>
<script>
export default {
}
</script>
<style lang="scss">
h1 {
font-size: 50px;
color: $blue;
}
</style>
And here is the error I am getting:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
4 │ color: $blue;
│ ^^^^^
╵
resources/js/components/HelloWorld.vue 4:11 root stylesheet
I'm sure I'm missing something, but any help on this would be appreciated.
I was led to answer from https://github.com/JeffreyWay/laravel-mix/issues/2896;
they seemed to upgrade the syntax the documentation can be found here:
https://github.com/JeffreyWay/laravel-mix/blob/467f0c9b01b7da71c519619ba8b310422321e0d6/UPGRADE.md#vue-configuration
When I tried your solution it did not work.
Here is how I managed to fix this issue, using this new/changed property additionalData, in previous versions this property was data or prependData.
mix.webpackConfig({
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: "sass-loader",
options: {
additionalData: `#import "#/_variables.scss";
#import "#/_mixins.scss";
#import "#/_extends.scss";
#import "#/_general.scss";`
},
},
],
}
]
},
resolve: {
alias: {
'#': path.resolve('resources/sass'),
'~': path.resolve('/resources/js'),
'Vue': 'vue/dist/vue.esm-bundler.js',
}
},
output: {
chunkFilename: '[name].js?id=[chunkhash]',
},
});
mix.js('resources/js/app.js', 'public/js').vue()
.sass('resources/sass/app.scss', 'public/css')
.copyDirectory('resources/images', 'public/images');
if (mix.inProduction()) {
mix.version();
}
Note that alias for path 'resources/scss' is "#".
I hope this saved someone some time :)
I am having big problems applying classes to my ul elements in React using SCSS and Webpack 4. I have upgraded my project to Webpack 4 ( #yesiamstupid )
If I taget a type of element (ul) it works.
My own class "navMenu" is never applied, though.
I can see the class in the web developer tools --> styles.scss
I expect the text background to be blue in the navigation.
[ app.js ]
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import AppRouter from './routers/AppRouter';
import 'normalize.css/normalize.css';
import './styles/styles.scss';
const jsx = (
<Provider>
<AppRouter />
</Provider>
);
ReactDOM.render(jsx, document.getElementById('app'));
[ AppRouter.js ]
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import StartPage from '../components/StartPage';
import Header from '../components/Header';
const AppRouter = () => (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route path="/" component={StartPage} exact={true} />
</Switch>
</div>
</BrowserRouter>
);
export default AppRouter;
[ StartPage.js ]
import React from 'react';
const StartPage = () => (
<div>
Hello
</div>
);
export default StartPage;
[ Header.js ]
import React from 'react';
import { NavLink } from 'react-router-dom';
const Header = () => (
<header>
<h1>Test WP4</h1>
<ul className="navMenu">
<li><NavLink to="/" activeClassName="is-active" exact={true}>Here we are</NavLink></li>
<li><NavLink to="/undefined" activeClassName="is-active" exact={true}>This route is undefined</NavLink></li>
</ul>
</header>
);
export default Header;
[_base.scss]
html {
font-size: 62.5%;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: $m-size;
}
button {
cursor: pointer;
}
button:disabled {
cursor: default;
}
.is-active {
font-weight: bold;
}
[ _settings.scss ]
// Colors
// Spacing
$s-size: 1.2rem;
$m-size: 1.6rem;
$l-size: 3.2rem;
$xl-size: 4.8rem;
$desktop-breakpoint: 45rem;
[ _header.scss ]
ul {
list-style-type: circle;
}
.navMenu {
text-align:center;
background:blue;
padding-top:400px;
}
[ styles.scss ]
#import './base/settings';
#import './base/base';
#import './components/header';
[ webpack.config.js ]
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = () => {
return {
watch: true,
//mode: 'development',
entry: ['babel-polyfill', './src/app.js'],
output: {
path: path.join(__dirname, 'public', 'dist'), //absolute path
filename: 'bundle.js' //name is whatever you want
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.svg$/,
loader: 'raw-loader'
}, {
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
}
]
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "style.css",
//chunkFilename: "chunk.css"
})
],
devtool: 'inline-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'), //absolute path
historyApiFallback: true, //go to index if path not found
publicPath: '/dist' //specify where bundle files liveY
}
};
}
I recommend you to split your tests for css and scss files.
In your code you are using sass-loader for css. Instead use something like this:
{
test: /\.css$/,
include: 'path-to-css-files',
use: [
MiniCssExtractPlugin.loader,
'css-loader'
],
},
{
test: /\.(sa|sc)ss$/,
exclude: 'path-to-css-files',
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
],
},
I am trying to integrate CKEditor version 5 into Angular 5 application. I created a component and imported required packages. I can compile perfectly fine CKEditor using Webpack using same code, however I fail todo so inside Angular. I get weird parser error for svg paths.
Error Screenshot:
https://www.dropbox.com/s/xwoas03fd4q7gks/Screenshot%202017-12-13%2011.55.45.png?dl=0
My Component looks like:
import { Component, AfterViewInit, ChangeDetectionStrategy, ViewChild, ElementRef, ViewEncapsulation, Input, Output, EventEmitter } from '#angular/core';
// Required Dependencies for library construction
import ClassicEditor from '#ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '#ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '#ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '#ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '#ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '#ckeditor/ckeditor5-block-quote/src/blockquote';
import Link from '#ckeditor/ckeditor5-link/src/link';
import List from '#ckeditor/ckeditor5-list/src/list';
import Heading from '#ckeditor/ckeditor5-heading/src/heading';
import GFMDataProcessor from '#ckeditor/ckeditor5-markdown-gfm/src/gfmdataprocessor';
#Component({
changeDetection: ChangeDetectionStrategy.Default,
encapsulation: ViewEncapsulation.None,
selector: 'ten-ckeditor',
styleUrls: ['./ckeditor.component.scss'],
templateUrl: './ckeditor.component.html',
})
export class CkeditorComponent implements AfterViewInit {
#Input() content: string;
#Output() contentEdited: EventEmitter<string>;
#ViewChild('editor') editor: ElementRef;
constructor() {
}
ngAfterViewInit() {
function Markdown( editor ) {
editor.data.processor = new GFMDataProcessor();
}
console.log(List);
ClassicEditor.create(this.editor.nativeElement, {
plugins: [
Markdown,
Essentials,
Paragraph,
Bold,
Italic,
Heading,
BlockQuote,
Link,
List
],
toolbar: [
'headings',
'bold',
'italic',
'blockquote',
'link',
'numberedList',
'bulletedList'
]
})
.then(editor => {
console.log('Editor was initialized', editor);
editor.setData(this.content);
})
.catch(error => {
console.error(error.stack);
});
}
}
This is what I get when I inspect HTML inside application when I target Icon.
<svg class="ck-icon" viewBox="0 0 20 20"><body><parsererror style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 1 at column 1: Document is empty
</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror></body></svg>
My icons weren't working either. I had something like this in my webpack config:
{
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader'
},
],
},
}
So I removed the '|svg' part, and then added:
{
test: /\.svg(\?.*)?$/,
loader: 'raw-loader',
},
And it works for me.