I’m upgrading my project to {N} 6.0 and had been using the nativescript-dev-sass plug-in. I realize the .scss files are now handled by WebPack, but I have a partial file (i.e., begins with an underscore since it’s #imported by other, platform-specific files), but I’m getting a build error stating that the variables referenced in the file are not defined, which suggests the file is being processed by the scss transpiler as a stand-alone file.
WARNING in ./views/_app-config-page.common.scss
Module build failed (from ../node_modules/sass-loader/lib/loader.js):
font-size: $apphdr-font-size;
^
Undefined variable: "$apphdr-font-size".
in /Users/david/Documents/NativeScriptProjects/cflclt/app/views/_app-config-page.common.scss (line 36, column 14)
# \b_[\w-]*\.)scss)$ (. sync (?<!\bApp_Resources\b.*)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$) ./views/_app-config-page.common.scss
# ./app.js
Is there something extra or different I need to do for partial .scss files in {N} 6.0?
The file name was the problem, or at least the cause of the error. When I changed the file name from
_app-config-page.common.scss
to
_app-config-page-common.scss
the build error went away. It appears this is a difference between WebPack's sass-loader and the previously used, now deprecated, nativescript-dev-sass plug-in.
Related
Compiling with Angular sources in Ivy partial compilation mode.(node:28784) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at C:\src\spaexample\axcess-spa-mainapp\node_modules\tslib\package.json. Update this package.json to use a subpath pattern like "./*".
✔ Compiling with Angular sources in Ivy partial compilation mode.
✖ Bundling to FESM2015
Invalid value for option "output.file" - when building multiple chunks, the "output.dir" option must be used, not "output.file". To inline dynamic imports, set the "inlineDynamicImports" option.
Check this answer :
Build error while doing lazy loading of modules
You need to export the lazy loaded modules in the public-api.ts.
I have a folder of SCSS files. The main SCSS file is /css/app.scss. It imports all the other SCSS files, like /css/variables.scss and /css/component_a.scss.
How can I have sass watch my /css/ folder for any changes, then recompile starting from /css/app.scss?
Right now it errors since /css/component_a.scss uses variables defined in a different file. But in app.scss they are imported in the correct order.
My answer may be limited because I don't have all the information about how you are compiling sass and what settings you are using.
However I can see that your file names aren't prefixed with an underscore, basically sass will compile every file individually that doesn't have the '_' prefix.
Basically what you want to do is set up your task manager (grunt, gulp, etc) to watch all files ending with '.scss' then tell it to run the sass compile task and have this pointed at your app.scss file.
With the limited information I have from your question I hope that my answer points you in the right direction to solve your problem.
When using Scout, is there a way to prevent it from compiling every SCSS file? I use one main SCSS file to import all dependency SCSS, thus only need the one CSS file output, as opposed to one CSS for each SCSS.
Files prefixed with an underscore do not get compiled to a CSS file. This is a standard Sass feature. Only the first file listed here will have a corresponding CSS file generated:
i-am-compiled.scss
_i-am-not-compiled.scss
_i-am-also-not-compiled.scss
I have a simple Rake Pipeline setup that does nothing more than run "stylus" on my .styl files, using the rake-pipeline-web-filters gem. (The original pipeline does much more, but I've trimmed it down to the essentials for this question.
=== Assetfile ===
require "rake-pipeline-web-filters"
output "build"
input "app/style" do
# Compile Stylus to CSS
match "*.styl" do
stylus
end
end
This works fine for converting individual .styl files to individual .css files.
However, I am not able to use the Stylus #import command to import one file in another (necessary for mixins, among other things. Instead I get the error
ExecJS::ProgramError: Error: stylus:1
> 1| #import "appmixins"
2|
failed to locate #import file appmixins.styl
All the styl files are in the same folder, and when I execute stylus on the commandline using the npm version, the import works fine, so there's no syntax error.
Is this just something that's missing from the Stylus Filter in rake-pipeline-web-filters, or is there something I can do to make it work?
Ok, it looks like when I run the in Rake Pipeline in assumes all paths are starting from the directory I'm running the pipeline in, and so all the #imports have to be relative to that. Changing my imports to #import "app/style/appmixins" worked. This is different from what the NPM version of Stylus does, since it expects (and the docs specify) that all the paths are relative to the individual stylesheets. Not sure if I could have specified the block differently in the Assetfile to make this work as expected, but no matter, it all works for me now.
I am trying to build a custom theme. I added the $base-color and $base_gradient properties to my resources/sass/app.scss and compiled it by issuing compass compile from the folder. The compilation worked and replaced the css/app.csss. However I am not seeing the changes reflected in my application. How do I change the theme with sass and compass?
Base gradient takes a - not a _
Then check that your var are defined after the line (should not matter for base-color but better to put them after)
#import 'sencha-touch/default/all';
Your vars should be defined like this :
$base-color: #7A1E08;
$base-gradient: 'glossy';
Check that you are in the [app-folder]/resources/sass/app.css and not in the sdk folder
When compiling you should see the following line
overwrite ../css/app.css
Empty your browser cache then reload your app.