So I have started using Brackets as my IDE, and have been trying to get SASS and everything else I need to work on it. So while I was playing around, I realized I was not able to share my partial files with other partial files. Am using the "brackets-sass" extension by jasonsanjose.
My folder structure for sass is as follows,
sass
|-> includes
_config.sass
_base.sass
_reset.sass
_utilities.sass
_helpers.sass
_main.sass
style.sass
I have a bunch of variables declared in my _config.sass file, but am not able to access them in any of the other partial files. I would like to know how this would be possible, or if this feature of the extension is yet to be implemented how would I do it.
My .brackets.json file looks something like this,
{
"sass.enabled": false,
"path": {
"sass/style.sass": {
"sass.enabled": true,
"sass.options": {
"includePaths": [
"../sass/includes"
],
"outputDir": "../css/",
"imagePath": null,
"sourceComments": "map",
"outputStyle": "nested"
}
},
"sass/includes/*.sass": {
"sass.enabled": false
}
}
}
If i try to import a partial file into another, it prompts the following error,
" file to import not found or unreadable: 'includes/config' #import 'includes/config' "
and if I try to use a variable in any other partial file from _config.sass i get the following error,
" unbound variable $var_name ".
Help would be much appreciated. Thank you.
Cheers
Paths and sass.options are in wrong place, I had similar issues.
I have it working with the following preferences in brackets.json
Works with multiple entry points and include path directories.
Rather than bourbon/neat add your includes.
{
"sass.enabled": false,
"sass.options": {
"includePaths": [
"../node_modules/node-bourbon/assets/stylesheets",
"../node_modules/node-neat/assets/stylesheets"
],
"outputDir": "../css/",
"imagePath": null,
"sourceComments": false,
"outputStyle": "nested"
},
"linting.collapsed": false,
"spaceUnits": 2,
"path": {
"scss/app.scss": {
"sass.enabled": true
},
"scss/teaser.scss": {
"sass.enabled": true
}
}
}
Hope that helps!
Related
I want to be able to dinamically load CSS in my Angular Project.
For that I followed all the steps at this tutorial here:
https://juristr.com/blog/2019/08/dynamically-load-css-angular-cli/
Unfortunately I am stuck at this problem in my angular.json below:
"dyncss": {
...
"build": {
...
options: {
...
"styles": [
"src/styles.scss",
{
"input": "src/client-a-styles.scss",
"bundleName": "client-a",
"inject": false
},
{
"input": "src/client-b-styles.scss",
"bundleName": "client-b",
"inject": false
}
],
}
},
...
},
As soon as I add the line: "inject": false,
I got these errors here:
"Schema validation failed with the following errors: Data path
".styles[1]" should NOT have additional properties(inject). Data path
".styles[1]" should be string. Data path ".styles[1]" should match
exactly one schema in oneOf"
If I remove the line "inject": false ng build work correctly but I have to put inject to be able to load the css dinamically afterwards...
p.s.: Angular version ^9.1.3
Please, any help is really welcome! Thanks in advance!
Try to update your packages properly. Make sure all the packages are up to date. I had similar issues, I forgot to update "ngx-build-plus" to match to my angular project version.
I have a nextjs app with redux.
When I try to use the ?? operator in my pages/index, it works as it should.
I then tried to load up a redux store with a bunch of reducers. When I hit the ?? in a reducer file, I get this error:
Support for the experimental syntax 'optionalChaining' isn't currently enabled (71:32):
I also get the error in any other file: component, actions and reducers. It is only directly in the pages/* that the plugin is working properly.
My app is using next#9.1.1 and redux#4.0.4. Here is my .babelrc file:
"env": {
"development": {
"presets": ["next/babel"],
"plugins": [
"#babel/plugin-proposal-optional-chaining",
"#babel/plugin-proposal-nullish-coalescing-operator",
[
"styled-components",
{ "ssr": true, "displayName": true, "preprocess": false }
]
]
}
}
}
Is there something that would override my babel config for certain files? If so, what am I missing? What else should I look at?
I have a problem with Web Compiler with VS2015 Update 1 and Sass.
In my Scss file, i declared some images as background.
Example :
.example {
background-image: url(images/ex.jpg);
}
In the file compilerconfig.json, the outPutFile is not in the same directory.
In the file compilerconfig.json.defaults, i set relativeUrls as false in sass section.
When i compile, url becomes relative like :
.example {
background-image: url(../../../../../images/ex.jpg);
}
I have the same problem with imported file.
Is there any way to resolve this ?
I found how to disable relative urls :
the option is not to set in the file compilerconfig.json.defaults but in compilerconfig.json :
[
{
"outputFile": "../../../../../inetpub/wwwroot/ui/skins/test.css",
"inputFile": "Web/Stylesheets/test.scss",
"minify": {
"termSemicolons": true
},
"options": {
"relativeUrls": false,
"lineFeed": "crlf"
}
}
]
Grunt novice here....what I am trying to do seems so simple, but I am at my wits end here. I am trying to concat the JS from a few separate bower components and then do the same with the CSS. Here is the relevant code from my grunt.file:
bower_concat: {
all: {
dest: 'builds/development/js/_bower.js',
cssDest: 'builds/development/css/_bower.css'
}
}
This is the last item in my config so does not need a comma after the final "}".
All the needed files are listed under "main" in their respective bower.json files. For example:
"main": [
"dist/owl.carousel.js",
"dist/assets/owl.carousel.css",
"dist/assets/owl.theme.css",
"dist/assets/owl.transitions.css"
],
I am positive these paths and file names are correct. The JS concats fine. The CSS does nothing. If I remove the "dest:..." line from my gruntfile (in an attempt to concat ONLY the CSS) terminal gives me the error ":Warning: You should specify "dest" and/or "cssDest" properties in your Gruntfile".
I clearly am specifying this. Help!
Finally got it to work with this:
bower_concat: {
all: {
dest: {
js: 'builds/development/js/_bower.js',
css: 'builds/development/css/_bower.css'
},
},
}
Essentially needed one more set of nested curly braces inside of "dest:". For the record you DO NOT need to specify mainFiles if they are designated in the bower_components json.
Ah, easy. You need to specify the component or library and then its mainFiles in your Gruntfile under grunt-bower-concat. Don't worry about messing with the individual components' files.
bower_concat: {
all: {
dest: 'builds/development/js/_bower.js',
cssDest: 'builds/development/css/_bower.css'
}
mainFiles: [
owlcarousel: [
"dist/owl.carousel.js",
"dist/assets/owl.carousel.css",
"dist/assets/owl.theme.css",
"dist/assets/owl.transitions.css"
],
],
}
FYI My current bower-concat for owlcarousel looks like this so double-check your bower_components folder tree structure.
bower_concat: {
all: {
dest: 'builds/development/js/_bower.js',
cssDest: 'builds/development/css/_bower.css'
}
mainFiles: [
owlcarousel: [
"owl-carousel/owl.carousel.js",
"owl-carousel/owl.carousel.css",
"owl-carousel/owl.theme.css",
"owl-carousel/owl.transitions.css"
], // (Version 1.3.2)
],
}
In Gruntfile.js for grunt-contrib-requirejs I can only register one task and I can only have one output file i.e. home_scripts.pack.js. However, I want to have as many as I want output files based on different 'include' criteria. For example, home_scripts.pack.js, checkout_scripts.pack.js, product_scripts.pack.js etc. This way each page will only load JS that is using:
This is invalid, however I want to do something similar:
requirejs: {
compile1: {
options: {
baseUrl: 'C:/project/js',
mainConfigFile: 'C:/project/js/app.js',
name: 'app',
paths: {
requireLib: 'C:/project/js/require.min'
},
*include: ['requireLib', 'home_page_internal.js'],*
*out: 'C:/project/js/home_scripts.pack.js'*
}
}
},
compile2: {
options: {
baseUrl: 'C:/project/js',
mainConfigFile: 'C:/project/js/app.js',
name: 'app',
paths: {
requireLib: 'C:/project/js/require.min'
},
*include: ['requireLib', 'checkout_internal.js'],*
*out: 'C:/project/js/checkout_scripts.pack.js'*
}
}
}
}
The code with asterisk above is the code I want to generate output files different for each page. However, if there is a more efficient way to generate and load large number of JS plugin files and modules through requireJS optimizer using grunt, I'm open to suggestions.
Thanks,
You need to take a look at RequireJS Multipage Example
It depicts how to use concatenation on basis of need of the page.
So your options will look like.
requirejs : {
compile : {
"baseUrl": "app",
"dir": "app/built",
"include": "main.js",
"paths": {
"angular": "bower_components/angular/angular.min",
"css" : "bower_components/require-css/css.min",
"text" : "bower_components/requirejs-text/text",
"css-builder" : "bower_components/require-css/css-builder",
"normalize" : "bower_components/require-css/normalize"
},
"modules" : [
{
"name" : "app",
"include" : ["text", "css"]
},
{
"name" : "modules/module1",
"include" : [],
"exclude" : ["app"]
},
{
"name" : "modules/module2",
"include" : [],
"exclude" : ["app"]
},
{
"name" : "modules/module3",
"include" : [],
"exclude" : ["app"]
} ]
}
}
Ignore other config and check modules config. It's an array which takes multiple AMD module and each will be concatenated in its own file.
In case of SPA, if you need to exclude any common modules which you dont want to be included in subsequent modules. In this case app module incorporates all the library layer and hence it is excluded from the subsequent modules.