I’m working with Dart 2 and AngularDart 5.
⚠ I searched online about my question, but I didn’t find a satisfactory answer.
❔ Can somebody explain all the steps I need to include and to work with SCSS style files within my AngularDart application?
I started with quickstart application that you can find here.
Thank you!
Add a dev dependency to your pubspec.yaml for sass_builder:
^2.0.0.
Run pub get to download the new dependencies.
Create a sass file ex: lib/app_component.scss and add some styles to it.
Add a the compiled css stylesheet to your the #Component annotation in lib/app_component.dart:
styleUrls: const ['app_component.css'],
The css file will be generated by sass_builder during the build process.
If you are using angluar_components. One could simply turn it on:
Create a build.yaml file with the following content :
targets:
$default:
builders:
angular_components|scss_builder:
enabled: True
Use the following convention for the styleUrl annotations:
styleUrls: const ['app_component.scss.css']
Write your sass in the *.scss files.
With newest versions:
Surprise: In styleUrls are in a different CSS filename (not with the .scss.css extension, just .css; e.g. app_component.css, but the styles are in app_component.scss).
Surprise: In app_component.scss, import without lib in the path:
#import 'package:angular_components/app_layout/mixins';
I am using this command:
pub run build_runner serve --verbose
See with package info:
https://github.com/dart-lang/angular_components/issues/374#issuecomment-636344237
Related
I have annoying issue with sass plugin. I use yeoman webapp geneator with default configuration. When I want to build production files (gulp command) I get sass error "File to import not found or unreadable [...]". It works only at first running gulp command – dist folder build properly. But when I want to run gulp command again I keep receiving this error (I have to restart computer to make it works again – at first run :) ). On the other hand, running "gulp serve" (live preview) command gets this same error only at fresh start – when I modify some .scss, files compile properly.
This is the main SCSS file:
// bower:scss
#import "bower_components/slick-carousel/slick/slick.scss";
// endbower
#import '_reset', '_fontello', '_variables', '_helpers', '_basic',
'_widerScreens', '_carousel';
Yeoman webapp generator v.3.0.1
I found this solution. Try to reproduce.
https://garystanton.co.uk/gulp-sass-file-to-import-not-found-or-unreadable/
I'm using Laravel 5.4 and Laravel Mix to output SASS files.
In my font definitions I'm configuring them so that when the CSS is output it will point to files such as public/assets/fnt/font-name/filename.ext but the processor changes the output so that it will instead point to public/fonts/filename.ext. Is there a way to stop it from changing the output paths?
It makes little sense to me that it would do something like this by default.
Edit
I've seen that the defaults they're using in Mix are the culprit:
module.exports.module = {
rules: [
// ...
{
test: /\.(woff2?|ttf|eot|svg|otf)$/,
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]?[hash]',
publicPath: '/'
}
}
]
};
I've tried using null-loader instead of file-loader but instead it causes it to fail because it can't find the files in node_modules which is not where it should be looking in the first place.
Removing the rule in question results in a flood of errors from trying to open and evaluate the font files in question:
error in ./public/assets/fnt/fanfare-jf/fanfare-jf.ttf
Module parse failed: DIRECTORY\public\assets\fnt\fanfare-jf\fanfare-jf.ttf Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap&precision=8!./resources/assets/sass/app.scss 6:2525-2590
# ./resources/assets/sass/app.scss
# multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
I can at least add emitFiles: false to options to prevent it from making copies of the file, but the paths are still being altered.
I ended up with the following configuration to at least get it to a working state.
let assetDir = 'assets/build';
mix.config.fileLoaderDirs.fonts = `${assetDir}/${mix.config.fileLoaderDirs.fonts}`;
mix.config.fileLoaderDirs.images = `${assetDir}/${mix.config.fileLoaderDirs.images}`;
mix.sass('resources/sass/app.scss', `public/${assetDir}/css`)
.js('resources/js/app.js', `public/${assetDir}/js`);
Updated:
In newer versions this has been made customizable via mix.options() and can be adjusted as below:
let assetDir = 'assets/build';
mix.options({
fileLoaderDirs: {
images: `${assetDir}/img`,
fonts: `${assetDir}/fonts`
}
});
// adjust build commands accordingly, for example:
mix.js('resources/js/app.js', `public/${assetDir}/js`);
The output you got is the intended behaviour due to your configuration.
You are using this configuration to load the file:
options: {
name: 'fonts/[name].[ext]?[hash]',
publicPath: '/'
}
Which says use the publicPath as public and create a file with the name fonts/[name].[ext]?[hash] and webpack knows about what these symbols '/', '.', '?' in the name do.
It just looks for the fonts directory and if there is no any fonts directory it creates a new one and place the files into that directory.
So, you need to use this configuration for your folder structure:
options: {
name: 'assets/fnt/font-name/[name].[ext]?[hash]',
publicPath: '/'
}
This should work for your configuration.
More on file-loader configuration:
https://github.com/webpack-contrib/file-loader#filename-templates
Edit:
Since Laravel Mix uses Webpack in it's background and Webpack doesn't have any knowledge of the fonts file when there is no any appropriate loader added to the configuration. So, the error:
Module parse failed: DIRECTORY\public\assets\fnt\fanfare-jf\fanfare-jf.ttf Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
is occurred.
You need to tell the Webpack to load the fonts to your desired directory and the fonts linked in your SASS file will be linked by the Webpack without any more configurations.
I have a file using scss with css-modules like so:
import styles from './Login.scss';
The webpack build works fine but i'm getting a flow error: Required Module Not Found
In my .flowconfig I have
[ignore]
.*/node_modules/fbjs/.*
.*/app/main.js
.*/app/dist/.*
.*/release/.*
.*/git/.*
[include]
[libs]
[options]
esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable
esproposal.export_star_as=enable
module.name_mapper.extension='css' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'
module.name_mapper.extension='styl' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'
module.name_mapper.extension='png' -> '<PROJECT_ROOT>/flow/WebpackAsset.js.flow'
module.name_mapper.extension='jpg' -> '<PROJECT_ROOT>/flow/WebpackAsset.js.flow'
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
I've also seen https://github.com/facebook/flow/issues/338 but it doesn't really have any solution.
Has anyone found a workaround for this issue?
A better solution for this error is to use the css-modules-flow-types webpack plugin to generate flow types for your CSS modules.
Flow doesn't know about the scss extension, so you need to add the following to your .flowconfig, in the [options] section:
; Extensions
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.json
module.file_ext=.css
module.file_ext=.scss
You should also add *.scss.flow to your .gitignore. These files shouldn't be checked in because they are automatically generated during the webpack build.
added all the file types I wanted flow to recognize in .flowconfig file
[options]
module.file_ext=.js
module.file_ext=.json
module.file_ext=.jsx
module.file_ext=.css
module.file_ext=.scss
This error can be fixed by assigning .scss files to an empty module. I just npm installed empty and added this to the .flowconfig :
module.name_mapper.extension='scss' -> 'empty/object'
We can use module.name_mapper.extension to replace types for imported module on Object
module.name_mapper.extension - Specify a file extension to match, and a replacement module name,
separated by a ->.
add option to .flowconfig file
// .flowconfig
[options]
module.name_mapper.extension='scss' -> '<PROJECT_ROOT>/flowconfig.mock-module.js'
create new file
// flowconfig.mock-module.js
export default Object;
I use SCSS file watcher in PhpStorm 9 and would like to disable source maps generation (.map files). How to configure a watcher for this?
if you've followed jetbrain's tutorial on how to work with sass/scss,
you probably installed ruby-sass (there's also node-sass).
any way phpstorm lets you define arguments when you setup a new watcher (settings->tools->file-watchers).
add the --no-source-map flag and it'll prevent sourcemap generation.
All is in the title :)
How can I build css from sass file in vscode ?
In task file I just found lines for LESS not for SASS...
Thanks a lot !
I got it to work.
My root path has a /css folder underneath with my styles.scss file & the associated map file. I also had to fix my path for ruby. Once those two were working, my build showed an error where ruby couldn't find the scss file. So I fixed my task file - here is the working file. Notice the ${fileDirname} - that fixed the build errors for pathing.
{
"version": "0.1.0",
"command": "sass",
"args": ["${fileDirname}/styles.scss", "${fileDirname}/styles.css", "--trace"],
"isShellCommand": true
}
}
But this was just a test -- it doesn't watch and build more than 1 file as you would normally want to in a larger system. The docs for gulp/automation are here: https://code.visualstudio.com/Docs/languages/CSS
We don't have predefined problem matchers for SASS yet. You might want to open a feature request here https://code.visualstudio.com/Issues/List
But you can always create a problem matcher for SASS yourself. Have a look at the doc here: https://code.visualstudio.com/Docs/tasks#_defining-a-problem-matcher