I'm currently trying to learn how to implement SASS into my web development projects but I'm struggling a little bit with figuring out how to properly compile my .scss files into one single .css file.
When I run sass --version in my terminal, I receive 1.53.0 compiled with dart2js 2.17.3. As far as extensions go, I'm using Live Sass Compiler by Glenn Marks, and within the settings.json file, my configuration looks like this:
{
"liveSassCompile.settings.formats":[
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
},
],
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
],
"liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.autoprefix": [
"defaults"
]
}
This is my current project directory:
Current Project Directory Structure
My current issue is that whenever I click Watch Sass, the only file I want to be output is the main.css and main.css.map but it creates an index.css and index.css.map file as well.
I'm trying to implement something similar to the 7 - 1 SASS Architecture, and within each of those folders I created an index.scss that'll contain each file in it's directory, which will then be #forward to the main.scss.
Is there any particular way I can avoid the extra files being created? I'm not too familiar with npm but I've heard it would be more beneficial to learn it in order to utilize SASS as opposed to using a VS Code extension and I'm more than open to taking that approach and scrapping the entire extension as a whole if it proves to be more efficient.
Thank you for your help in advanced, I hope I provided enough information!
Dart sass comes with an inbuilt compiler
Just run the code
sass --watch sass/main.scss css/main.css
This one faulty line is probably the reason for your problem.
Change this:
"liveSassCompile.settings.generateMap": true,
to this:
"liveSassCompile.settings.generateMap": false,
If you decide to stick with my extension then you can specify a single file to output/watch with the liveSassCompile.settings.includeItems setting - as shown below
{
"liveSassCompile.settings.includeItems": [ "/path/to/main.scss" ]
}
Alternatively, and possibly a better solution, you can use a negative glob expression in the liveSassCompile.settings.partialsList to treat every other file as a partial. Then, when any SASS file is saved, it triggers compilation of just your main.scss file
Related
I have this folder structure:
sass/main.sass
css/main.css
js/...
img/...
I want the sass output to go to the css folder, but each time I run sass watcher it creates a new css file within the sass directory among sass files.
Thx for information about using 'Live SASS Compiler' in VS Code.
To set special otuput pathes to your project you need to add the settings for output pathes to the settigns.json of your project:
File: `projectDIR/.vscode/settings.json'
Example for setting the save pathes to output directory:
"settings": {
// output: generate files to ...
// ~ = path starts relative from scss-file
"liveSassCompile.settings.formats":[
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../assets"
},
// ad a compressed version
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "~/../assets"
}
// optional: add more outputs ...
],
}
See also official example in web: https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md
Additional hint:
VERSION OFF 'LIVE SASS COMPILER' MAY BE OUTDATED
The actual commmon used Extension Live Sass Compiler is not longer supported (for years now). It uses an outdated SASS Version. The most recent features like #use are not supported in that version. You use that outdated version if author is 'Ritwick Dey'.
But there is an active supported fork with same name 'Live SASS Compiler' build by 'Glenn Marks'. As fork it works the same way and the settings are almost the same. Or you can use another actual compiler which is faster as you can use an direct installed SASS Version on your system. In that case you need to change the settings for your project.
Information about that you will find here:
https://stackoverflow.com/a/66207572/9268485
Updated: Correction name of author of supported extension 'Live SASS Compiler' to correct identification of extension.
Go to path: C:\Users\your user\AppData\Roaming\Code\User\settings.json
and change there the "liveSassCompile.settings.formats" section
for example:
the parameter : "savePath": "/Python/CSS",
I have several questions on my ASP.NET MVC CORE 2.2 project.
The main goal is very simple, i want to update my stylesheet and then deploy this result. I have a Site.less, site.css, site.min.css, site.min.css.gz that i want to update with a css class style, a bundleconfig.json with my input css, javascript files to be bundled and a compilerconfig.json that has Site.less as an input and site.css as output. I also have BuildBundlerMinifier installed on my project (NuGet).
Questions:
1- What file should i update when adding some new style: Site.less, site.css or both?
2- What are the steps to minify and bundle before i publish my app?
bundleconfig.json:
[
{
"outputFileName": "wwwroot/css/bundle.min.css",
// An array of relative input file paths. Globbing patterns supported
"inputFiles": [
(...)
"wwwroot/css/Site.min.css"
]
},
(...)
// Optionally specify minification options
"minify": {
"enabled": true,
"renameLocals": true
},
// Optionally generate .map file
"sourceMap": false
}
]
compilerconfig.json
[
{
"inputFile": "wwwroot/css/Site.less",
"outputFile": "wwwroot/css/site.css"
}
]
When i rebuild my project in my Output window (Visual Studio 2017) i have the following messages.
Cleaning output from bundleconfig.json,
Done cleaning output file from bundleconfig.json, Begin processing bundleconfig.json, Minified wwwroot/css/bundle.min.css, Done processing bundleconfig.json
Thank you.
My first question is answered.
I have installed an extension in Visual Studio 2017 (Tools -> Extensions and Updates) named Web Compiler. When i make an update in my less file, the css file and min.css are auto generated (min.css.gz is not and don't know why). The files that the code is auto generated are water marked with Generated keyword.
To produce the auto generated files you only need to rebuild the project.
This works with other files but in my case i am only using this ones.
EDIT
My second question is also answered.
I have installed another extension: Bundler & Minifier
To produce bundle you need to have those config json files i have posted in my first post and then open Task Runner Explorer and double click on wwwroot/css/bundle.min.css (inside StyleSheets menu) and the bundle file will be auto generated.
I have a web application built with webpack. I have many styling variations, and those styles are all called style.css and in their own respective directories like
./STYLE_A/style.scss
./STYLE_B/style.scss
./STYLE_F/style.scss
I am supplying a cross-env variable STYLE_DIR to webpack and I want that variable to control where the scss gets included from.
I've tried:
require(`./${STYLE_DIR}/style.scss`); //in the webpack (does nothing)
I've tried:
require(`./${STYLE_DIR}/style.scss`); //in my client.js (ends up including every style.scss from every one of the style directories)
I've tried setting this to a 'process.env' variable in webpack, I've tried using an alias to resolve, there's something I'm just missing.
I got interested in your question, then I did a little research and I think I have a way to make it work.
Steps:
1.
In Webpack config file use DefinePlugin in order to have a constant that can be setup at compile time. You do that in this way:
const GLOBALS = {
'process.env.STYLE_DIR': JSON.stringify(process.env.STYLE_DIR)
};
export default {
entry: [
'./app/index'
],
output: {
path: path.resolve(__dirname, '/dist'),
filename: 'bundle.js'
},
plugins: [
new webpack.DefinePlugin(GLOBALS)
],
...
}
2.
Put your style.scss file in the correct folders (STYLE_A, STYLE_B and STYLE_C as you indicated).
3.
In your .js file require your SCSS file as follow (of course be sure to have the corresponding loaders properly setup in Webpack config file):
require(`./${process.env.STYLE_DIR}/style.scss`);
4.
Set the STYLE_DIR variable before you run webpack. Something like this:
export STYLE_DIR = 'STYLE_A'
This is working for me. If I change the STYLE_DIR value before running Webpack I get a different style file imported.
I hope this helps.
Hi there I have been forced to come here due to every resource out there on the topic is very poor and incomplete.
Not only on the babel site but every single post out there is not complete and informative enough.
I tried to reach out at the babel forum and no replies.
I am trying to convert my prototype libraries to Es6 and convert to the most leanest possible code. So no bloaty duplicated generated code and if possible no bloaty requirejs and whatever browserify generates.
I have tried to make a project with grunt and babel directly, configure the external-helpers plugin according to the babel documentation.
It fails to include the relevant helper code and fails to include the import module code altogether.
ie a babel config like
{
options: {
sourceMap: false,
presets: ['es2015'],
"plugins": ["external-helpers"]
},
dist: {
files: {
'build/<%= package.name %>.js': ['src/<%= package.name %>.js']
}
}
}
The main project file has an import like
import Button from './ui/buttons/Button';
The module code looks like this as if the export is placed underneath extra code is generated for that.
export default class ShareButton {}
produces an output like this
Object.defineProperty(exports, "__esModule", {
value: true
});
require('babel-core/external-helpers');
var _Button = require('./ui/buttons/Button');
var _Button2 = babelHelpers.interopRequireDefault(_Button);
No source of the module or the helper object is included.
I searched hard for how to deal with external-helpers and it suggests it has to be imported into a separate file ie something like this to generate only the helper functions needed
babel-external-helpers -l createClass > src/helpers.js
But any resource regards to this fails to go as far as to how to import that into the project.
If I use the transform-runtime plugin, it produces a massive polyfill that cannot be disabled so a bug and not so useful for what I need.
"plugins": [
["transform-runtime", { "polyfill": false, "regenerator": false }]
]
If I use browserify / babelify it makes a royal mess and duplicates code still.
A config like
{
options: {
"transform": [["babelify", {
"presets": ["es2015"],
"plugins": ["external-helpers"],
sourceMap: false
}]]
},
dist: {
files: {
'build/<%= package.name %>.js': ['src/<%= package.name %>.js']
}
}
}
Produces code like this still with the external helper missing and duplicated code not relevant to the helper. ie
Object.defineProperty(exports, "__esModule", {
value: true
});
Is within every module in the generated file.
If I export the classes like this at the bottom of every file
export default class {}
Duplicated code is generated like
var _class = function _class() {
babelHelpers.classCallCheck(this, _class);
};
exports.default = _class;
In terms of filesize that doesn't include bloaty wrapping code like
},{}],2:[function(require,module,exports){
It seems concatting all the prototype classes files together to bundle in one file is the winner still.
So trying to port the library but keep it similar and bundle it together into one file.
Hopefully this is concise enough and there is a simple solution.
FYI browsers do not understand tabs and 4 spaces. I had to edit this post in my editor to get the code blocks working ! It would be nice to have a markup like other places like "```" ?
Let me know thanks.
I'm using rollup with babel now. Rollup produces a clean output as umd mode. Browserify is really bloaty in itself.
There is just a problem with polyfills being converted. I have to concat external ones in like for WeakMap.
I had a problem trying to use the generated Iterator and finding a polyfill for that so I have to code loops a particular way it doesn't generate Iterators.
The polyfill generation in babel is still too bloaty and crazy. It's pretty terrible. So I concat in minified polyfills that are very small and it's used globally.
I was running into something very similar. Was tired of trying to do it the "right way" and ended up just creating https://www.npmjs.com/package/grunt-babel-helpers which simply manipulates the string output.
Until recentlly I was using the rather awkward dotless. I'm restricted to what I can use somewhat because I'm using VS2010, however I came across ServiceStack Bundler which seems to work great... apart from one thing.
My Less files are split using a directory structure - to simplify things, like this:
scaffolding/my-scaffolding.less
utilities/my-utilities.less
ui/my-ui.less
Each directories has many files, particularly with mixins etc.
In order to link them together, I've been using the #import function.
My main less file - main.less contains the following:
#import "utilities/all-utilities.less"
All utilities are listed here as it enables me to plug and play various file-sets. This code previously worked ok.
However I find ServiceStack won't pick up changes unless I reference all the less files individually and directly through the bundle file, which is a bit of a pain.
So, I can't use: main.less and import all sub files.
Instead, I have to use:
utilities/util1.less
utilities/util2.less
utilities/util3.less
and so on.
I'm using the ms build function to compile.
Any ideas?
/* UPDATE */
Tried the recommended answer below without success.
This is what I've tried so far:
Call a single less file that contains all #import declarations;
Does not trigger updates on compile.
Call all less files from bundle file and add #import statements to less files where necessary (note bundler won't compile without these);
Duplicates the #imported code as many times as the #import statement is used - even when (reference) directive is used, resulting in bloated/incorrect code.
You should be able to modify Bundler's bundler.js file to specify additional paths that less should search for when processing #import directives:
function compileLess(lessCss, lessPath, cb) {
var lessDir = path.dirname(lessPath),
fileName = path.basename(lessPath),
options = {
paths: ['.', lessDir], // Specify search paths for #import directives
filename: fileName
};
less.render(lessCss, options, function (err, css) {
if (err) throw err;
cb(css);
});
}
A mistake on my part, but one which wasn't easily spottable, so I'll post the reason for my problems so that others don't spend hours as I did chasing a solution to an unecessary problem.
I was using ServiceStack Bundler - I believe this issue would also have occured on on any solution using npm's less library.
My main issue was that none of my changes were triggered on compile. I use lots of #imports and numerous sub-directories for my less files so my first thoughts were the problem was due to subdirectories, and later, due to #import statements. However neither was correct.
I defined a bundle: main.css.bundle
Within the bundle I called my main less file that contained all the other #imported files: main.less
The issue was that less would normally reserve main.css, but the bundle also gives its output the same name based on the bundle name. So both were conflicting.
Change the bundle name or the main less file name and all should work.