I have a sass file that I want to override the existing stylesheet but I'm unable to see the sass override when I inspect in the browser. I included a screen shot that doesn't show the design system and override:
_titlebar.scss - variable used from design system.
.ui-dialog.active-dialog:not(.ui-dialog-minimized) .ui-dialog-titlebar {
background-color: var(--linq-color-primary-500);
}
_index.css
#import './_status.scss';
#import './_titlebar.scss';
I use a design system in the application that include the core file, a theme file and the material design theme. I removed part of the https for the design system for security reasons below
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Alio</title>
<link href="app/alio/img/LINQ-logo.svg" rel="shortcut icon" />
<script src="runtime/js/bootstrap.js"></script>
<link href="runtime/css/frames-loader.css" rel="stylesheet" />
**<link href="https://.../theme/blueberry-muffin.css"
rel="stylesheet" media="all" />
<link href="..../snackpaq-core.css"
rel="stylesheet" media="all" />
<link href="https://.../material-theme.css"
rel="stylesheet" media="all" />**
<title></title>
</head>
<body>
<script type="text/javascript">
bs_init();
</script>
gruntfile.js
module.exports = function (grunt) {
var env = grunt.option('env'); // i.e.: --env develop
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
banner: '/*\n' +
' * <%= pkg.name %>\n' +
' * \n' +
' * Version: <%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd") %>)\n' +
' * Copyright <%= grunt.template.today("yyyy") %> MORPHIS - http://www.morphis-tech.com/\n' +
' */\n',
sass: {
css: {
options: {
sourcemap: env == 'develop' ? 'auto' : 'none'
},
files: {
'css/expanded-default.css': 'scss/expanded-default.scss',
'css/expanded-light.css': 'scss/expanded-light.scss',
'css/expanded-light-rtl.css': 'scss/expanded-light-rtl.scss',
'css/expanded-dark.css': 'scss/expanded-dark.scss',
'css/expanded-dark-rtl.css': 'scss/expanded-dark-rtl.scss',
'css/expanded-purplelight.css': 'scss/expanded-purplelight.scss'
.....
}
}
},
cssmin: {
options: {
banner: '<%= banner %>',
},
css: {
files: {
'css/light.min.css': ['css/light-rtl.css'],
'css/light-rtl.min.css': ['css/light-rtl.css'],
'css/dark.min.css': ['css/dark-rtl.css'],
'css/dark-rtl.min.css': ['css/dark-rtl.css']
}
}
},
watch: {
sass: {
files: [
'scss/**/*.{scss,sass}',
'widgets/**/*{scss,sass}',
'../base/scss/**/*{scss,sass}',
'../base/widgets/**/*{scss,sass}'
],
tasks: ['sass:css']
},
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass', 'cssmin']);
};
Can someone please provide a reason why and a solution to what I need to do to get the the sass override to work properly.
Related
Putting, in src/ directory, a main page (index.html) like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- build:css styles/index.css -->
<link rel="stylesheet" href="styles/index.css">
<!-- endbuild -->
</head>
<body></body>
</html>
And a CSS file (index.css in styles/ dir.) like e.g.:
body {
background-color: red;
}
I configure a Gulp task that link the CSS file with the HTML one:
const gulp = require('gulp'),
injStr = require('gulp-inject-string'),
useref = require('gulp-useref');
gulp.task('default', () => {
const tab = ' ',
nl = '\n',
nlTab = nl + tab;
return gulp.src('src/index.html')
//.pipe(injStr.before('</head>', tab + '<!-- build:css styles/index.css -->' + nlTab + '<link rel="stylesheet" href="styles/index.css">' + nlTab + '<!-- endbuild -->' + nl))
.pipe(useref())
.pipe(gulp.dest('.tmp/'));
});
If Gulp is executed, all the comments content is transformed to <link rel="stylesheet" href="styles/index.css">. Ok, it is normal.
Well, the problem occurs when I want simplify it avoiding write the comments manually in HTML. Uncomment the JS sourcecode (line 10), delete comments in HTML (8-10) and execute again. Gulp Useref does nothing! Transformation is not working. Why!?
I discovered the solution!:
The carriage return character is missing. Use '\r\n' instead of the lonely '\n'.
I am using webpack for my react project to generate index.bundle.js file.
This is my webpack.config.js...code
const path = require('path');
module.exports = {
output: {
path: path.join(__dirname, '/dist'),
filename: 'index.bundle.js',
},
// entry:{
// path: path.join(__dirname, '/dist')
// },
devServer: {
port: 3000,
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.(sa|sc|c)ss$/, // styles files
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.(png|woff|woff2|eot|ttf|svg|jpeg|webp)$/, // to import images and fonts
loader: "url-loader",
options: { limit: false },
}
]
},
};
This is my index.html file... index.html file is inside public folder
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="/index.bundle.js"></script>
</body>
</html>
My index.bundle.js file is inside dist file, name as index.bundle.js.
I want to check here that my index.bundle.js is compiled successfully or not so, i am trying to run that index.bundle.js inside index.html. So i can see my react project using index.bundle.js. so here what i am doing.
i am using Open In Default Browser extension to run my html code on browser. I am not sure i am doing right step!, If not How can i run html code
second thing
if inside index.html i change my script src path to
<script src="../dist/index.bundle.js"></script>
i am getting this error..
index.bundle.js:2 Uncaught Error: ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: 2752
at Object.set [as exports] (index.bundle.js:2:1234650)
at 2752 (index.bundle.js:2:168796)
at a (index.bundle.js:2:1233913)
at index.bundle.js:2:1237036
at index.bundle.js:2:1237044
When I change the pages without loading them in the cache with service workers there are no problems when I go to save the pages in the cache they are no longer found both online and offline. The problem occurs only with pages and not with other elements such as .jpg .png .js .css and some .html elements
When i go to another page after i saved it in the cache
Unable to reach site The web page at link of the page may be temporarily unavailable or has been permanently moved to a new web address.
ERR_FAILED
Service Workers
const staticChacheName = 'site-static'
const assets = [
'/',
'/index.html',
'/Html/Elements/footer.html',
'/Html/Elements/mobile_menu.html',
'/Html/Elements/navbar.html',
'/Html/Pages/film.html', //not working
'/Html/Pages/anime.html', //not working
'/Html/Pages/sitobello.html', //not working
'/Html/Pages/song.html', //not working
'/Html/Pages/amici_home.html', //not working
'/Html/Pages/Amici/tilde.html', //not working
'/Html/Pages/Amici/kloe.html', //not working
'Css/Index/style.css',
'Css/Sito Bello/background.css',
'Css/Sito Bello/section.css',
'Css/Sito Bello/settings.css',
'Css/Song/background.css',
'Css/Song/elementi.css',
'Css/Film/background.css',
'Css/Film/elementi.css',
'Css/Anime/background.css',
'Css/Anime/elementi.css',
'Css/Element/footer.css',
'Css/Element/mobile_menu.css',
'Css/Element/navbar.css',
'Css/Element/scrollbar.css',
'Css/Amici/Home/background.css',
'Css/Amici/Home/elementi.css',
'Css/Amici/Kloe/background.css',
'Css/Amici/Tilde/background.css',
'/Images/Logo.png',
'/Images/Index/background.jpg',
'/Javascript/Element/navbar.js',
'/Javascript/Film/add.js',
'/Javascript/Sito Bello/add.js',
'/Javascript/Sito Bello/settings.js',
'/manifest.webmanifest',
'/Javascript/app.js',
]
//install service worker
self.addEventListener('install', evt => {
// console.log('service worker has been installed')
evt.waitUntil(
caches.open(staticChacheName).then(chache => {
console.log('chaching shell assets')
chache.addAll(assets)
}))
})
//activate service worker
self.addEventListener('activate', evt => {
// console.log('service worker has been activated')
})
self.addEventListener('fetch', evt => {
//console.log('fetch event', evt)
evt.respondWith(
caches.match(evt.request).then(chacheRes => {
return chacheRes || fetch(evt.request)
})
)
})
Example of a page that doesn't work
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" href="/Css/Element/navbar.css">
<link rel="stylesheet" href="/Css/Element/mobile_menu.css">
<link rel="stylesheet" href="/Css/Film/background.css">
<link rel="stylesheet" href="/Css/Film/elementi.css">
<link rel="stylesheet" href="/Css/Element/footer.css">
<link rel="stylesheet" href="/Css/Element/scrollbar.css">
<link rel="manifest" href="/manifest.webmanifest">
<link rel = "icon" href = "/Images/Logo.png" type = "image/x-icon">
<title>Aside - Film</title>
</head>
<body>
<nav></nav>
<div id="mb-menu"></div>
<h1 id="title">Film</h1>
<div id="films">
<!-- aggiunge film -->
</div>
<footer></footer>
<script src="/Javascript/app.js"></script>
<script src="/Javascript/Film/add.js"></script>
<script src="/Javascript/Element/navbar.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(function(){
$("nav").load("/Html/Elements/navbar.html");
$("footer").load("/Html/Elements/footer.html");
$("#mb-menu").load("/Html/Elements/mobile_menu.html");
});
</script>
</body>
</html>
Site structure
what am I doing wrong? because I would like my site to work offline too but not being able to load the other pages it works only in the home
I just installed a clean Laravel project with the Jetstream starter kit, so it also installed Tailwind CSS.
I then tried to use the sample code from Tailwind but it won't show up.
This is my simple test code from the Tailwind docs: (from https://tailwindcss.com/docs/hover-focus-and-other-states)
app.blade.php: (You can run the code snippet because this is actually what I get in my project)
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="font-sans antialiased">
<button class="bg-red-500 hover:bg-red-700">
Hover me
</button>
</body>
</html>
this is the tailwind.config.js file:
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
mode: 'jit',
purge: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.vue',
],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
},
variants: {
extend: {
opacity: ['disabled'],
},
},
plugins: [require('#tailwindcss/forms'), require('#tailwindcss/typography')],
};
this is the webpack.mix.js file:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
])
.webpackConfig(require('./webpack.config'));
if (mix.inProduction()) {
mix.version();
}
and this is the app.css file:
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
run npm run dev or npm run watch to compile the assets if you didn't already.
You should first run this command npm run dev then run php artisan serve
I made a Pwa with Flutter Web and I set as color on the whole project: # 8C3144. On Index.html I have black-translucent so also the status-bar in ios became # 8C3144, but it continues to remain black. I don't understand what I need to change, I don't think the problem is in the Flutter project
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="UTF-8">
<meta name="theme-color" content="#8C3144">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="follow crash">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="crash">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>Crash</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-core.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
measurementId: "xxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
SOLVED
In the in index.html add this in the head:
<style>
body {
background-color: #79d279;
}
</style>