I'm running into an issue which seems similar to the one reported in https://github.com/sass/dart-sass/issues/284, but doesn't seem 'fixed' for me. I'm trying to follow the workflow described in https://getbootstrap.com/docs/4.1/getting-started/theming/ to import Bootstrap's SCSS source code.
Here is my (simplified) directory structure:
.
├── index.html
├── node_modules
│ ├── #mdi
│ └── bootstrap
├── package-lock.json
├── package.json
├── scss
│ └── peek-solutions2.scss
└── stylesheets
└── peek-solutions.css
I've installed Bootstrap using npm install bootstrap; my package.json contains the following dependencies:
{
"dependencies": {
"#mdi/font": "^2.2.43",
"bootstrap": "^4.1.1"
}
}
In peek-solutions2.scss, I've added the following line:
#import "../node_modules/bootstrap/scss/bootstrap";
I've tried the sass --watch command specifying input and output files in different directories (cf. https://sass-lang.com/guide), but I run into an import error:
Kurts-MacBook-Pro:peek-solutions2 kurtpeek$ sass --watch scss/peek-solutions2.scss:stylesheets/peek-solutions2.css
Error: Can't find stylesheet to import.
#import "functions";
^^^^^^^^^^^
../node_modules/bootstrap/scss/bootstrap.scss 8:9 #import
scss/peek-solutions2.scss 1:9 root stylesheet
Sass is watching for changes. Press Ctrl-C to stop.
It seems like this is a path issue; _functions.scss is in the same directory as bootstrap.scss in node_modules/bootstrap/scss, but it seems like the sass command is expecting it to be in my custom scss directory. How can I fix this?
just delete the dots in the beginning , you must write:
#import "node_modules/bootstrap/scss/bootstrap";
in your scss file
This happened to me because I was running ng build --prod within a folder other than the root project folder, and every other css import breaks.
The solution is to cd to the root folder.
I solved it by using an extra forward slash #import "//abstracts/variable";
I solved this issue by pointing the imports to the files directly, i.e:
#import 'style/components/palette';
to
#import 'style/components/_palette.scss';
For those using the sass NPM package and have their own NodeJS build script, make sure that you provide loadPaths as an options parameter in your compile or compileAsync method. For example:
import sass from 'sass';
// const sass = require('sass');
const build = async () => {
await sass.compileAsync('./src/index.scss',
{
sourceMap: true,
style: 'expanded',
loadPaths: ['./src']
}
);
};
Here ./src is where your main scss file resides, relative to your project directory. You might not need this configuration if the index file is in project root, but most people probably don't put their scss files there.
I finally worked around this problem by using Grunt instead of sass to compile and watch the SCSS files. After running npm install grunt --save-dev, npm install grunt-contrib-sass --save-dev, and npm install grunt-contrib-watch --save-dev, I added the following Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: { // Task
dist: { // Target
files: { // Dictionary of files
'stylesheets/main.css': 'scss/main.scss', // 'destination': 'source'
}
}
},
watch: {
scripts: {
files: ['**/*.scss'],
tasks: ['sass'],
},
},
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass']);
};
Now if I run grunt watch, whenever I save scss/main.scss it gets compiled into stylesheets/main.css:
Kurts-MacBook-Pro:peek-solutions2 kurtpeek$ grunt watch
Running "watch" task
Waiting...
>> File "scss/main.scss" changed.
Running "sass:dist" (sass) task
Done.
Completed in 1.720s at Sun Jul 01 2018 14:41:11 GMT-0700 (PDT) - Waiting...
I installed the bootstrap old version which didn't add scss folder in bootstrap under my node module, so I uninstalled my bootstrap by the command npm uninstall bootstrap and installed it back by npm i bootstrap.
If, for example your index.scss file is in a directory called 'sass' e.g.
├── node_modules
├── sass
│ └── index.scss
then you should use this file path:
#import "../node_modules/bootstrap/scss/bootstrap";
I also got this error and I solved it just using the relative path, like this:
#import '../../node_modules/bootstrap/scss/bootstrap';
If you're using rails and trying to get production to work, you may have run the production command to build assets in your dev environment. For instance:
yarn build:css
or
sass ./app/assets/stylesheets/application.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules
Either way, Rails may be preferring the "built" assets over the dev ones. So you may already have fixed the issue with bootstrap and not know it! Remove your build directory:
rm -rf app/assets/builds
and your other asset files will be used.
I faced this issue in Laravel 9. Remove this symbol. ~
// Bootstrap
#import "bootstrap/scss/bootstrap";
In peek-solutions2.scss, remove the previous code and add this:
#import "node_modules/bootstrap/scss/bootstrap";
According to this github issue:
Dart Sass's command-line interface doesn't look for imports in any location that's not explicitly provided as a --load-path on the command line. Node Sass's CLI may behave differently.
Thus to get the a similar behaviour with node-sass use --load-path.
sass --load-path=./ src/scss/styles.scss dist/css/styles.css
This command will load the current dir and will resolve ./node_modules or a possible ./src.
I fixed this issue with updating sass version from 1.26.10 to 1.32.13.
Check where Bootstrap is in node_modules and add
#import "../node_modules/bootstrap/scss/bootstrap";
for it.
Try #import "~bootstrap/scss/bootstrap.scss";,
no forward slash after the tilde.
It can be routing issues, if you are on rails use this
#import "../../../node_modules/bootstrap/scss/bootstrap";
#import '../../../node_modules/bootstrap-icons/font/bootstrap-icons';
In my case, it was caused by the fact that my project was opened in a parent folder
root ⬅️ my vscode had this folder as a root
└── project ⬅️ should have been in this folder instead
├── node_modules
├── src
├── static
└── ...
In my case, I had a symlink to my C:\dev folder when the physical location was actually E:\dev. Changing directories from C:\dev\project to E:\dev\project and running the mix command fixed this for me
If you're using Aurelia, WebPack and SASS and you did an NPM install of bootstrap the import will be:
#import "../../node_modules/bootstrap/scss/bootstrap";
You simply need to cd into the root of your project folder. Two scenarios:
If you're deep inside the project, you need to run cd .. in the command line until you are in the root.
If you're outside of the project, you need to run cd [insert root folder here] and run your build again.
Related
I am setup the project of the vuejs on of the my goals in the end of the project is to compile files scss which is the main file with name style.scss- from input to output in the file main file style.css to Load in the vuejs.
Also all files .scss should include with #importfor examples: #import "variables";and so on
in the main file style.scss.
I read about it.enter link description here
My project is as in the picture below.
Any idea how to sole it?
Thanks.
My dear friend, if I have understood your meaning correctly, I would like to try to offer you some solutions.
In order to use SCSS in a project and compile it automatically in the background, we can do the following steps:
1. Install node-sass
To get the compiler, we’re going to install the node-sass package.
Go to your terminal, navigate to the project folder and type in the following:
npm i node-sass
2. Create an SCSS folder
Create a new folder called scss in your project. After doing so, copy and paste all the CSS files from your css (or stylesheets) folder to your new scss folder.
Rename the extensions on all the newly pasted css files with .scss
You should end up with a scss folder which looks exactly like your css folder but with the files ending with .scss.
3. Add a script in package.json
In your package.json file, locate scripts and add the following piece of code inside it:
"scss": "node-sass --watch scss -o css"
If your css folder is named something other than css, then replace the word css with the folder name.
Similarly, if your scss folder is named something other scss, then replace scss with the correct folder name.
Setting context in the overall package.json file, the script will be placed like this:
{
“name”: “example-project”,
“version”: “0.4.2”,
“scripts”: {
“start”: “node ./bin/www”,
“scss”: “node-sass — watch scss -o css”
},
"dependencies": {
"express": "~4.16.0",
"express-favicon": "^2.0.1",
}
}
4. Run the compiler
Get back into terminal and run the following commandL
npm run scss
Now you’ll notice any changes you make in your scss files will automatically be reflected in the css files.
if you have any new idea about Compile SASS to CSS you can check another steps with this link.
I am using Tailwind CSS 3.0 and have configured it according to the Using with Preprocessors documentation.
My main.css file looks like this:
#import "tailwindcss/base";
#import "./custom-base-styles.css";
#import "tailwindcss/components";
#import "./custom-components.css";
#import "tailwindcss/utilities";
My postcss.config.js looks like this:
module.exports = {
plugins: {
"postcss-import": {},
tailwindcss: {},
autoprefixer: {}
}
}
The directory structure looks like this:
Styles/v2
├── custom-base-styles.css
├── custom-components.css
└── main.css
wwwroot/dev
└── v2
└── main.css
And I execute the following command to build my main.css file:
npx tailwindcss -i ./Styles/v2/main.css -o ./wwwroot/dev/v2/main.css --watch
The build is executed and my wwwroot/dev/v2/main.css file is produced, but none of the additional changes added in my custom styles are included. Also; the --watch argument is listening for changes to the main.css input file, but non of the #import-ed files.
It turns out I wasn't actually using PostCSS directly when using npx tailwindcss. As explained on the Tailwind CSS Getting Started guide, Tailwind CLI and PostCSS are two different ways of using Tailwind.
So in the above question, the answer is to use PostCSS CLI and invoke the build using: postcss ./Styles/v2/main.css -o style.css --watch.
This should also do the trick!
tailwindcss -i ./Styles/v2/main.css -o style.css --postcss
I have a "static" directory with SCSS files. I have application components that live in another directory, each of which has an SCSS file.
I'd like to compile all of these files into one .css file in an output directory. One of the "static" SCSS files is a variables file that should be imported into all of the other files. I'd also like to not have to maintain the import paths in each of the components, and more may be added later.
This is the script I've tried, which seems to only find the "static" directory and outputs them as individual css files in output/styles. The documented node-sass commands are pretty light on explanation.
"scss": "node-sass --watch ./my/static/styles ./my/components -o ./output/styles --output-style compressed"
I am going to assume this is not for a React project. If it is for React than there is a really good article here and it is relatively straight fwd. https://scotch.io/tutorials/using-sass-in-create-react-app-v2
Assuming a blank project in vanilla javascript this is what I do after running npm init and all that.
create and index.html file
create a css folder and scss/sass folder
inside the css folder create a style.css file
install node-sass as dev dependency
inside package.json file write a script like:
"scripts": {"compile:sass": "node-sass sass/main.scss css/style.css -w"}
run the script inside your terminal using npm run compile:sass
install live server if you have not already done so, npm i live-server -g
you can import all your scss files ie. _header.scss _nav.scss, _variables.scss into one main.scss file create above.
You might also need to have a non-empty style.css file before you compiling. This will be overridden once your run npm run compile:sass
I'm currently discovering modules with npm, and I went to use bootstrap-sass. Now that the modules were downloaded, I was looking for a solution to compile scss into the static folder of the application, and also the js bootstrap files.
But according to npmjs documentation of the modules, I can't found a simple solution which is not to move the js files myself and compile the scss bootstrap files from node_modules with something like node-sass.
What is the simplest way to use this module correctly and with the possibility to custom ?
Edit :
For now, I am using the following scripts/files :
"compile-js": "browserify assets/static/js/main.js | uglifyjs > assets/static/js/bundle.js",
"compile-sass": "node-sass assets/scss/app.scss assets/static/css/app.css --output-style compressed"
app.scss
#import "../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap-sprockets.scss";
#import "../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
main.js
global.jQuery = require("jquery")
const bootstrap = require('bootstrap-sass');
I've never used bootstrap-sass before, but the documentation implies that a build tool to preprocess the SCSS is a prerequisite for using this module. While it's no longer the shiniest tool in the shed, Gulp is very capable of handling this task as well as moving the files from node_modules to your project root directory for you.
Here's a breakdown of one approach to implement this:
Create three subfolders in your project root directory and call them sass, css and javascript.
Create a file in the sass folder and call it app.scss. Open it and paste this: #import './node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss';. When the file is converted into CSS, all of the Bootstrap modules will be there. Beneath the #import statement on line 1, feel free to write whatever style rules you want.
Assuming you have already run npm init and have a package.json file in your project directory, run npm install gulp -D in your terminal. This installs gulp (my task runner of choice!).
Run npm install gulp-sass --save-dev. This installs the gulp plugin that will preprocess the Bootstrap SASS into CSS.
Create a file in your root directory (not in any of the subfolders) called gulpfile.js
Copy and paste this text into gulpfile.js:
(note: for this to work, your SASS and CSS folders must be called sass and css, respectively, unless you change their names in the following code.)
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass-to-css', function () {
return gulp.src('./sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('javascript', function () {
return gulp.src('./node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js')
.pipe(gulp.dest('./javascript'));
});
gulp.task('default', ['sass-to-css', 'javascript']);
Lastly, run the command gulp in your terminal to execute the gulpfile, which will do two things:
Preprocess and move all of the SASS into your css folder.
Copy bootstrap.min.js from node_modules into your project's javascript folder.
Of course, don't forget to link to these assets in your HTML.
I whipped up this gulpfile on the fly and it works on my machine, but if you decide to try this approach then feel free to ask if something throws an error. Best of luck on your project.
I've been looking for many hours at how to use SCSS in the Underscore theme that I downloaded with _sassify.
When I open the folder and I see the style.css and the folder with scss files, the theme use css but I want change and use the scss file.
I don't understand how to use it.
What is the process to use scss? Can someone help me with this?
Thanks
You have to use a preprocessor to compile scss to css. The theme uses css, this will not change. You do your changes in scss - then scss compiles to css. A preprocessor can be part of your IDE, you can use programs like Koala, Scout, Prepros or you use the sass command line.
You should start reading here:
http://sass-lang.com
Try compiling your first .scss files in a test directory with help of http://sass-lang.com/guide:
sass input.scss output.css
Then start tweaking _s.
I spent a few days how to change styles in Underscore Theme with scss files to css file. Earlier I worked with Gulp so I wanted to create gulpfile that will work. I created normal file with Gulp which at first didn't work - it worked in cmd, but on Wordpress nothing changed. But after adding a plugin WP-SCSS finally it works! So thanks a lot for your answer Jonathan and for helping me to find this plugin. Maybe it will help someone, so below I add the code from the gulpfile.
// gulpfile.js
var gulp = require("gulp"),
sass = require("gulp-sass"),
postcss = require("gulp-postcss"),
autoprefixer = require("autoprefixer"),
cssnano = require("cssnano"),
sourcemaps = require("gulp-sourcemaps");
function style() {
return (
gulp
.src(paths.source.src)
.pipe(sourcemaps.init())
.pipe(sass())
.on("error", sass.logError)
.pipe(postcss([autoprefixer(), cssnano()]))
.pipe(sourcemaps.write())
.pipe(gulp.dest(paths.source.dest))
);
}
// $ gulp style
exports.style = style;
var paths = {
source: {
// By using styles/**/*.sass we're telling gulp to check all folders for any sass file
src: "sass/**/*.scss",
// Compiled files will end up in whichever folder it's found in (partials are not compiled)
dest: "."
}
};
function watch() {
gulp.watch("sass/**/*.scss", style);
}
// $ gulp watch
exports.watch = watch
You need to follow the steps from this page https://github.com/Automattic/_s
Setup
To start using all the tools that come with _s you need to install the necessary Node.js and Composer dependencies :
$ composer install
$ npm install
Available CLI commands
_s comes packed with CLI commands tailored for WordPress theme development :
composer lint:wpcs : checks all PHP files against PHP Coding Standards.
composer lint:php : checks all PHP files for syntax errors.
composer make-pot : generates a .pot file in the languages/ directory.
npm run compile:css : compiles SASS files to css.
npm run compile:rtl : generates an RTL stylesheet.
npm run watch : watches all SASS files and recompiles them to css when they change.
npm run lint:scss : checks all SASS files against CSS Coding Standards.
npm run lint:js : checks all JavaScript files against JavaScript Coding Standards.
npm run bundle : generates a .zip archive for distribution, excluding development and system files.
I'm not sure about the Underscore theme specifically, but I have used this plugin in the past and I really like it. It lets you use SCSS with any theme and automatically compiles the files for you.