I'm using gulp to compile my scss files. Everything worked until I got a new laptop, and now the nested variables aren't compiling.
For example, none of these colors compile:
$theme-colors: (
primary: #002d72,
secondary: #53565a,
purple: #4e2984,
light-purple: rgba(78, 41, 132, .8),
light-blue: #69b3e7,
error: #d72f09
);
Example of how a "theme color" would be called:
h3 {
color: theme-color("primary");
}
I had to re-install npm and gulp, so I am obviously using different versions of these two packages then I was previously.
Here are the versions:
npm: 8.5.0
gulp: CLI version: 2.3.0
Local version: 4.0.2
node: v16.14.2
My gulpfile looks like this (it handles scss and js files):
/* file: gulpfile.js */
var gulp = require('gulp');
var sass = require('gulp-sass')(require('node-sass'));
const minify = require('gulp-minify');
var concat = require('gulp-concat');
gulp.task('sass', function(){
return gulp.src('resources/assets/styles/**/*.scss')
.pipe(sass()) // Using gulp-sass
.pipe(gulp.dest('dist/styles'))
.pipe(minify({
ext: '.css',
mangle: false,
noSource: true
}))
});
gulp.task('compress', function() {
return gulp.src('resources/assets/scripts/*.js')
.pipe(concat('main.js'))
.pipe(minify({
ext: '.js',
mangle: false,
noSource: true
}))
.pipe(gulp.dest('dist/scripts'));
});
gulp.task('watch', function() {
gulp.watch('resources/assets/styles/**/*.scss', gulp.series('sass'));
gulp.watch('resources/assets/scripts/**/*.js', gulp.series('compress'));
});
Note: I added require('node-sass') to get gulp to work on the new computer.
If anyone has an idea of what's wrong here, it would be a huge help!
thanks!
Jill
The issue was caused by a discrepancy in the bootstrap node module versions. When the site was first built, it installed bootstrap version 4.3.1. After getting a new laptop and re-installing all the node modules, bootstrap 5.1 was installed.
Not exactly sure why bootstrap would affect scss variables, so if YOU know feel free to enlighten me.
To update the bootstrap version number, navigate to the directory containing the node_modules and run, npm install bootstrap#<version-number> --save
Related
This is for my Laravel + Vue SPA app.
I have this Laravel Mix config file here:
const path = require('path');
const fs = require('fs-extra');
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
require('laravel-mix-bundle-analyzer');
function publishAssets() {
const publicDir = path.resolve(__dirname, './public');
if (mix.inProduction()) {
fs.removeSync(path.join(publicDir, 'dist'));
}
fs.copySync(path.join(publicDir, 'build', 'dist'), path.join(publicDir, 'dist'));
fs.removeSync(path.join(publicDir, 'build'));
}
mix.js('resources/js/app.js', 'public/dist/js')
.sass('resources/sass/app.scss', 'public/dist/css').options({
postCss: [tailwindcss('./tailwind.config.js')],
processCssUrls: false,
});
// alias the ~/resources folder
mix.webpackConfig({
plugins: [
// new BundleAnalyzerPlugin()
],
resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
'#': `${__dirname}/resources`,
'~': path.join(__dirname, './resources/js'),
ziggy: path.join(__dirname, './vendor/tightenco/ziggy/dist/js/route.js'),
},
},
output: {
chunkFilename: 'dist/js/[chunkhash].js',
path: mix.config.hmr ? '/' : path.resolve(__dirname, './public/build'),
},
});
mix.then(() => {
if (!mix.config.hmr) {
process.nextTick(() => publishAssets());
}
});
It works fine with npm run watch, but when I do npm run production, the CSS doesn't work. The site loads and works, but the CSS is missing.
Can anyone see what in my code is causing it?
Here's my spa.blade.php:
<link rel="stylesheet" href="{{ mix('dist/css/app.css') }}">
...
<script src="{{ mix('dist/js/app.js') }}"></script>
In the network tab of Chrome dev tools, the CSS file is 270kb in develop environment and 42kb in prod environment.
Something is getting translated wrong.
In my case, it cause by setting wrong property "purge" in tailwindcss config file.
When I ran "npm run hot" or "npm run dev", the website was fine.
But it broke when I ran "npm run prod".
It seems the dev mode ignore the property "purge".
I'm calling this solved for now because my site started working.
it was extremely difficult to navigate since I had 6 months of work on a dev branch, and it worked via npm run watch. When I merged into master, npm run production loaded incorrectly--the styles were half there and half missing.
The solution was to downgrade from tailwindcss#1.9 to tailwindcss#1.4.
Along my way, I read something about postcss or something not working with the --no-progress flag which is on npm run production.
A person could try removing that flag, but I already downgraded tailwind so I didn't try that.
After installing the gatsby-plugin-sass module:
When I try to run gatsby build, I get the following error:
ERROR
Unknown error from PostCSS plugin. Your current PostCSS version is 6.0.23, but autoprefixer uses 7.0.26. Perhaps this is the source of the error below.
ERROR #98123 WEBPACK
Generating development JavaScript bundle failed
Browser queries must be an array or string. Got object.
File: src/indexs.sass
failed Building development bundle - 9.200s
I have been working on a resolution to this for hours. I have tried:
custom webpack rules in gatsby-node.js for sass files
reading, re-reading, and re-re-reading the instruction on gatsby's site
updating PostCSS using npm in every way I know how
So far, nothing has worked.
Why is it so complicated to get sass working with gatsby? When the documentation on gatsby's site makes it seem so easy?
Any suggestions what I can do to get this working?
in gatsby-node.js:
exports.onCreateWebpackConfig = ({
stage,
rules,
loaders,
plugins,
actions,
}) => {
// console.log('rules',rules)
// console.log('rules.css',rules.css())
// console.log('rules',rules.postcss())
actions.setWebpackConfig({
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
],
},
plugins: [
plugins.define({
__DEVELOPMENT__: stage === `develop` || stage === `develop-html`,
}),
],
})
}
In gatsby-config.js:
{
resolve: `gatsby-plugin-postcss`,
options: {
postCssPlugins: [require(`postcss-preset-env`)({ stage: 0 })],
},
},
`gatsby-plugin-sass`,
the sass import line in gatsby-browser.js:
import "./src/indexs.sass"
Using sass instead of node-sass saved my day.
remove node-sass
npm uninstall node-sass
or
yarn remove node-sass
and add sass aka dart-sass
npm install --save-dev sass
or
yarn add sass
then edit gatsby-config.js
plugins: [
{
resolve: `gatsby-plugin-sass`,
options: {
implementation: require("sass"),
},
},
]
now run gatsby develop
:)
I'm a bit late to the party but hopefully this might help someone.
I have Sass setup and working with Gatsby without to much extra config required.
Install both node-sass and gatsby-plugin-sass via npm.
npm install --save node-sass gatsby-plugin-sass
Include gatsby-plugin-sass in your gatsby-config.js file in plugins: [] as below with any other Gatsby plugins you maybe using.
module.exports = {
siteMetadata: {
title: `#`,
description: `#`,
author: `#`,
},
plugins: [
`gatsby-plugin-sass`,
],
}
Write your styles as .sass or .scss files and import your main styles.scss (or whatever you prefer to name it) either in your main Layout.js file or gatsby-browser.js file as below using the path to the location of your styles.scss file.
import "./src/styles/styles.scss"
I hope this works for you but if you have any other trouble add a comment and I'll try to reply back.
I hope someone chimes in on this to show how exactly to set up gatsbys sass plugin. I could not get it to work at all.
But I did find a workaround in my case:
I removed gatsby-plugin-sass from the plugins array in gatsby-config.js, turning it off (but I did not uninstall it using npm)
I installed postcss-node-sass and postcss
I added this info to the plugins array in gatsby-config.js:
{
resolve: `gatsby-plugin-postcss`,
options: {
postCssPlugins: [
require(`postcss-preset-env`)({ stage: 0 }),
require(`postcss-node-sass`)(),
],
},
},
I added a custom rule for webpack in gatsby-node.js:
exports.onCreateWebpackConfig = ({
stage,
rules,
loaders,
plugins,
actions,
}) => {
// console.log('rules',rules)
// console.log('rules.css',rules.css())
// console.log('rules',rules.postcss())
actions.setWebpackConfig({
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
],
},
plugins: [
plugins.define({
__DEVELOPMENT__: stage === `develop` || stage === `develop-html`,
}),
],
})
}
I've edited a simple Gulp pipeline (that i've tested and works outside the IDE) and i'm now trying to include it into PHPStorm Project in order to achieve a better css workflow in a real project.
This is the script, (it's a simple css optimization pipeline):
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
del = require('del');
// Styles
gulp.task('styles', function() {
return sass('../scss/base.scss', { style: 'expanded' })
.pipe(autoprefixer('> 1%, last 2 versions, Firefox ESR, Opera 12.1'))
.pipe(minifycss())
.pipe(gulp.dest('../css'))
.pipe(notify({ message: 'Styles task complete' }));
});
// Clean
gulp.task('clean', function(cb) {
del(['css/base.css'], cb)
});
// Default task
gulp.task('default', ['clean'], function() {
gulp.start('styles');
});
The annoying problem i cannot solve is related to the module sass that is the missing a proper ruby environment initialization, needed in order to run the command.
sass = require('gulp-ruby-sass') ->
'sass' not recognized as an internal or external command.
As i said before, I managed to run this gulp script using an external shell link from the ruby installer:
Start Command Prompt with Ruby
C:\Windows\System32\cmd.exe /E:ON /K C:\Ruby21\bin\setrbvars.bat
Do you have any clue on how to run gulp scripts that needs ruby inside PhpStorm?
Thanks in advance,
Please make sure that Ruby is in your system PATH - in Control Panel, go to System properties, Advanced, press Environment variables, in System variables section select PATH and append C:\Ruby21\bin to it. Make sure to restart PHPStorm after changing PATH
I have my gulpfile (using Laravel Elixir) set up to create 4 files.
app.css
app.js
vendor.css
vendor.js
When I run either gulp, or gulp default app.js does not get created. Yet if I run gulp watch, it is created perfectly.
Here is the elixir method:
elixir(function(mix) {
// Register html watcher
mix.templates()
// Compile app css
.sass('app.scss', null, {
includePaths: require('node-bourbon')
.with(require('node-neat').includePaths)
})
// Concatenate vendor css
.styles([
...
], 'public/css/vendor.css', 'public/css/vendor')
// Minify & concatenate vendor js
.scripts([
...
], 'public/js/vendor.js', 'public/js/vendor')
// Minify and concatenate app js
.scriptsIn('resources/assets/js', 'public/js/app.js')
// Version the compiled resources
.version([
'css/app.css',
'js/app.js',
'css/vendor.css',
'js/vendor.js'
]);
});
Using Sass with sourcemaps works fine for me with unminified CSS, but using my minified CSS it doesn't.
I'm guessing this might be because the references first get's built to the compiled css file, but then the minified version changes everything and references then fail, could that be it? If so, I still don't know what to do about it. Any help to find a solution would be much appreciated.
This is in my last line of my main *scss-file:
/*# sourceMappingURL=mytheme-full.css.map */
I'm thinking; If I just change to the following, it should work. But no!
/*# sourceMappingURL=mytheme-full-min.css.map */
This is from my Gruntfile.js:
cssmin: {
build: {
files: {
'sites/all/themes/mytheme/css/mytheme-full-min.css': 'sites/all/themes/mytheme/css/mytheme-full.css'
}
}
},
sass: {
dist: {
options: {
sourcemap: 'auto'
},
files: {
'sites/all/themes/mytheme/css/mytheme-full.css': 'sites/all/themes/mytheme/sass/mytheme-full.scss'
}
}
},
To date, grunt-contrib-cssmin doesn't support sourcemaps (see here and here).
However, both grunt-contrib-sass and grunt-autoprefixer support sourcemaps, so your best bet is probably to enable sourcemaps on those and use the unminified css for development and debugging. To enable sourcemaps in autoprefixer, just set:
options: {
map: true
}