I'm coming to you because I would like to use the Tabulator http://tabulator.info/ library in a Laravel project. I have correctly installed the library in my project (import of css and js scripts).
Terminal :
npm install tabulator-tables
resources/js/app.js:
window.Tabulator = require('tabulator-tables/dist/js/tabulator.js');
resources/js/app.scss:
#import 'variables';
#import "../../node_modules/tabulator-tables/dist/css/tabulator.min.css";
#import "../../node_modules/tabulator-tables/dist/css/bootstrap/tabulator_bootstrap.min.css";
And to stylize the tables a bit, Tabulator provides a system to use sass variables.
resources/js/_variables.scss:
$backgroundColor:black;
$headerBackgroundColor: #3F3F3F;
$headerTextColor: #fff;
$borderColor:#FFE6;
$rowTextColor: #000000;
$rowSelectedBackground: #FFE6A8;
#import "../../node_modules/tabulator-tables/dist/css/tabulator_simple.min.css";
But as indicated in the documentation http://tabulator.info/docs/4.9/style#sass, it is enough to override the variables used by the library to style the tables. But when I do npm run dev, no changes are made. Would you have an idea ?
Sorry i have noticed that i import the wrong file in resources/scss/app.scss.
//wrong way
#import "../../node_modules/tabulator-tables/dist/css/tabulator.min.css";
//good way
#import "../../node_modules/tabulator-tables/src/scss/tabulator_simple";
Related
I am evaluating Svelte with Bootstrap/Sveltestrap and a Bootswatch theme.
I need to support an offline use case, which means Bootswatch's fonts can't be loaded from google via a CDN.
So i configured svelte-preprocess and sass, but when compiling my app.scss I get this error:
[plugin:vite:css] expected ")".
╷
9 │ #import url(../node_modules/.pnpm/bootswatch#5.2.0/node_modules/bootswatch/dist/lumen/$web-font-path);
│ ^
╵
node_modules/.pnpm/bootswatch#5.2.0/node_modules/bootswatch/dist/lumen/_bootswatch.scss 9:15 #import
src/app.scss 5:9 root stylesheet
app.scss
$web-font-path: false;
#import 'bootswatch/dist/lumen/_variables.scss';
#import 'bootstrap/scss/bootstrap.scss';
#import 'bootswatch/dist/lumen/_bootswatch.scss';
main.ts
import './app.scss';
import App from './App.svelte';
const app = new App({
target: document.getElementById('app'),
})
export default app;
Based on my understanding of bootswatch#573 & bootswatch.com/help setting $web-font-path: false should disable the #import in _bootswatch.scss, but that obviously isn't the case. Somehow $web-font-path is not falsey inside _bootswatch.scss.
The top of _bootswatch.scss
$web-font-path: "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght#0,300;0,400;0,700;1,400&display=swap" !default;
#if $web-font-path {
#import url($web-font-path);
}
Any one have any ideas? Is svelte somehow mangling the SASS variable? Trying to maintain the ability to customize the theme via SASS variables, and disable external font loading.
I'm using Bulma with Webpack 4. I'm trying to change the colour of button.is-primary to be pink instead of turquoise.
Here's the entire contents of my .scss file.
#charset "utf-8";
#import url('https://fonts.googleapis.com/css?family=Poppins:600');
$body-size: 14px;
$primary: $pink;
#import "../../node_modules/bulma/bulma.sass";
This is getting me the following error on build.
1>Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
1>
1>$primary: $pink;
1> ^
1> Undefined variable: "$pink".
Now, if I set $primary to be a specific hex colour it builds fine, so this issue seems to be because I'm trying to use the existing colour variable $pink. It does make sense to me that it hasn't been defined at that point, but the docs clearly say that I can add my overrides before importing Bulma, and their example does the same thing.
Can anyone point me in the right direction?
EDIT: here's the documentation screen I'm looking at.
https://bulma.io/documentation/customize/with-webpack/
I note that in their example they do set new values for derived variables BUT only where they've redefined the intial value, like this...
$pink: #FA7C91;
If I change my .scss file as follows it does then compile and work as expected.
#charset "utf-8";
#import url('https://fonts.googleapis.com/css?family=Poppins:600');
$body-size: 14px;
$pink: #FA7C91;
$primary: $pink;
#import "../../node_modules/bulma/bulma.sass";
This should clarify things for you: https://versions.bulma.io/0.7.0/documentation/overview/customize/
// 1. Import the initial variables
#import "../sass/utilities/initial-variables";
// 2. Set your own initial variables (optional)
$pink: #ffb3b3;
// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink;
In my case, I forgot that I was importing Bulma via its compiled .css file.
Of course, you cannot override the Sass variables that way because after compilation they don't exist. To override Bulma's variables you need to import its .sass file(s), not its .css file.
Sharing in case anyone else makes the same mistake.
I tried to install CoreUI in my Laravel project using webpack.mix.js. I used the following for style and icons.
// CoreUI Icons Set
#import '~#coreui/icons/css/coreui-icons.min.css';
/* Import Font Awesome Icons Set */
#import '~font-awesome/scss/font-awesome.scss';
/* Import Simple Line Icons Set */
#import '~simple-line-icons/scss/simple-line-icons.scss';
/* Import Flag Icons Set */
#import '~flag-icon-css/css/flag-icon.min.css';
/* Import Bootstrap Vue Styles */
#import '~bootstrap-vue/dist/bootstrap-vue.css';
// If you want to override variables do it here
#import "variables";
// Import styles with default layout.
// If you are going to use dark layout please comment next line
#import "~#coreui/coreui-pro/scss/coreui";
// Import styles with dark layout
// If you want to use dark layout uncomment next line
//#import "~#coreui/coreui-pro/scss/themes/dark/coreui-dark";
// If you want to add something do it here
#import "custom";
// ie fixes
#import "ie-fix";
When I compile code using Laravel Mix I get the following error.
Error: Conflict: Multiple assets emit to the same filename
fonts/vendor/#coreui/icons/CoreUI-Icons-Linear-Free.eot?089ab3c11c572362d088083c561cfa55
I found some solutions on the internet, but they don't work in my case.
This had to do with a Webpack update. Ran into the same issue, just unlucky timing.
Try this.
npm install webpack#4.40.2 --save-dev
rmdir node_modules /Q /S
npm install
npm run prod
I am practicing sass in my code editor. When I tried to compile my sass file and built a watcher. I receive:
Jiatongs-MacBook-Pro:6_myLandingPage_starter jiatongli$ sass --watch sass:css
Error: Undefined variable.
background-color: $white
^^^^^^
sass/modules/_navbar.sass 3:21 #import
sass/modules/_modules-dir.sass 1:9 #import
sass/app.sass 3:9 root stylesheet
Because I cannoStackOverflow files here on stackoverflow, I link my github repository which is:
https://github.com/riederleeDEV/SASS-project.git.
It seems like the sass watcher cannot capture my file import and I do
not know where went wrong
Here is the command I used: sass --watch SASS:CSS(the command should not have any error)
After I checked the file, I discovered that there is nothing wrong with my app.sass import nor the typo. Just want to ask where I went wrong?
Try this:
<···· Move variables to top
#import "base/base-dir" |
#import "layout/layout-dir" |
#import "modules/modules-dir" |
|
#import "variables" ············
#import "mixins.sass"
Using rails 3.1 and less-rails (>= 2.1.1):
Is anyone out there successfully using #import to include local .css.less files? I'm using the following file structure to try to do so:
application.css:
//= require less
less.css.less:
#import "layout"
layout.css.less:
body {
background-color: white;
}
However the contents of layout.css.less never get loaded. I also tried importing "layout.css" and "layout.css.less" to no avail.
I know that less.css.less gets loaded because if I put some css in there, it gets loaded.
I'm using #import to include the layout.css.less file because (ultimately) I'm trying to use the asset helper image-url, and the author of less-rails told me I need to use #import here
UPDATE:
I added a semicolon to the #import statements, and now rather than nothing from the less.css.less file being loaded, I see the #import statements themselves in the loaded stylesheet.
I got this working by renaming the layout.css.less file to layout.less