Can we refer sass file instead of css file directly in the index.html?
If it is possible, how does the webpack compile sass into css file? Also, which is the best way to bundle the sass file while building the application?
I am using the following versions:
webpack(3.5.5), angular/cli(1.4.1) and angular4
My folder structure is like this,
src
├--- assets
| ├--- sass
| | ├--- common.scss
| | ├--- base.scss
| | ├--- coustom.scss
| ├--- css
| ├--- common.css
| ├--- base.css
| ├--- coustom.css
|
├--- index.html
├--- .angular-cli.json
First of all browser does not understand scss ot less. so you have to compile then and convert them to css while running in your browser.
As you are using angular cli there is a pretty sumple way to do that and no configuration required.
new cli project
so while generating you project you can pass a flag to tell cli to choose scss instead of css.
ng new projectname --style scss
existing project
If its an existing cli project you can edit .angular-cli.json file to change from css to scss.
first your style need to scss
"styles": [
"/asset/scss/common.scss",
"/asset/scss/base.scss",
"/asset/scss/custom.scss",
"/asset/scss/common.css",
"/asset/scss/base.css",
"/asset/scss/custom.css",
"styles.scss"
],
and the default style is scss
"defaults": {
"styleExt": "scss",
"component": {}
}
For external js libraries you you add a script block and add your scripts there. it will automatically added to your build.
"scripts": [
"../node_modules/jquery/dist/jquery.js"
],
Related
I've installed tailwind using npm install tailwindcss
I then create my src/style.css file and include
`#tailwind base;`
`#tailwind components;`
`#tailwind utilities;`
When I run my build-css command I get a generated output.css file, but the file is only 425 lines long. It looks likes it's missing the components and the utilities. When I link my HTML to the output.css I get the base tailwind css styles applied, but utilities have absolutely no effect. I have followed the docs to the best of my ability as well as several tutorials with the same result every time. No clue what I am I doing wrong, the tuts I have watched show this file to be thousands of lines of code while mine is always 425.
You need to add a config js file for the tailwind engine, inside the config file use content attribute to define where is your HTML or JS files, the new engine automatically looks inside these files and compiles only the classes that you used.
Check this video for more information:https://youtu.be/mSC6GwizOag?t=22
If you believe you have set everything up properly, check that the structure of the project directory is correct:
project_directory/
|
|--- tailwind.config.js
|
|--- dist/
| |
| |--- output.css
|
|--- src/
|
|--- input.css
|
|--- index.html
|
|--- main.js
References
Cannot use tailwind classes
try this :
npx tailwindcss-cli#latest build ./src/styles.css -o ./public/styles.css
ps: the styles.css in the public folder is the output.css
It was my config file, I wasn't point to my source file correctly. Fixed this by coping the documentation's example and file structure. content: ["./src/**/*.{html,js}"], was what I needed to add to the tailwind.config.js
In my case, I had spaces in the file extensions that cause my problem
module.exports = {
content: ['./app/**/*.{js,ts,jsx,tsx}'],
//wrong content: ['./app/**/*.{js, ts, jsx, tsx}'],
theme: {
extend: {},
},
plugins: [],
};
The content of style.css gets overridden eahc time I run npm run dev
This is my webpack file
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
mix.styles(['resources/assets/style.css'], 'public/css/app.css');
Any way to append the css and not override it?
app is the default name taken by the webpack
So either change
.sass('resources/assets/sass/app.scss', 'public/css') -> .sass('resources/assets/sass/app.scss', 'public/css/newfile.css')
or
mix.styles(['resources/assets/style.css'], 'public/css/app.css') -> mix.styles(['resources/assets/style.css'], 'public/css/styles.css')
Edit: If you need everything in one file
mix.sass('resources/assets/sass/app.scss', 'public/css/app.css')
mix.styles(['public/css/app.css', 'resources/assets/style.css'], 'public/css/app.css')
Hope this helps
You don't need to change your webpack file.
In addition to importing .sass and .scss files, Sass can import plain old .css files. The only rule is that the import must not explicitly include the .css extension, because that’s used to indicate a plain CSS #import.
Webpack
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Sass (resources/assets/sass/app.scss)
...
#import '../style.css';
Normally I use
{ test: /\.sass$/, loader: 'style!css!sass?indentedSyntax' }
and then in main.js
require('./styles.sass')
But it applies style using javascript when main.js is loaded. The problem is that my app us isomorphic and returns some html initially. Because I load main.js just before </body> tag, then styles are applied to document a bit too late (user sees not-styled HTML for a moment).
Therefore I would like to generate regular css file from styles.sass and then simply include id in <head></head> to make sure it is loaded initially. How I can generate regular css file?
I tried:
entry: {
styles: path.resolve(__dirname, 'app/styles.sass')
}
but it generates styles.js instead of .css file. Moreover if I include styles.js in a head then I get following error in console from styles.js:
Uncaught ReferenceError: webpackJsonp is not defined
Use the extract text plugin.
Put this in your loaders:
{ test: /\.scss$/, loader: ExtractTextPlugin.extract("css!sass") }
...and in your plugins:
plugins: [
new ExtractTextPlugin("styles.css")
]
Adapted from...
http://webpack.github.io/docs/stylesheets.html#separate-css-bundle
When I use Sass in my projects, I in most cases use the same file structure. At least when it comes to the css-folder.
├── index.html
├── /css
│ ├── style.css
│ ├── /sass
│ ├───── style.scss
│ ├───── ...
In the public folder where I tend to put my js, css and images folder, I always make a batch file. Something like this:
cd "`dirname "$0"`"
sudo sass --watch css/sass:css
This works for all my projects. I just run it and minimize the window. This looks for changes and converts Sass to regular css to the style.cssfile. Then in my index.html I just include css/style.css.
Hope this helps you
I have tried to follow the instructions at laravel-elixir, but I'm apperantly still to green to get it, so I hope you can explain it to me in a more beginner-friendly way.
I want to use elixir to compile my scss from resources/assets/scss/styles.scss and then output the file to public/styles.css .
How do I set the custom path to my .scss file? Where is the file outputted, so I can .copy() it to public?
My styles.scss looks like this (yes, there are 2 assets folders in total. Laravels and my own):
/*! Testing Elixir */
//assets
#import 'assets/cssReset';
#import 'assets/variables';
#import 'assets/mixins';
//layouts
#import 'layouts/base';
#import 'layouts/dashboard';
#import 'layouts/logo';
#import 'layouts/forms';
#import 'layouts/siteNavigation';
#import 'layouts/lesson';
#import 'layouts/course';
#import 'layouts/courseList';
#import 'layouts/courseNavigation';
#import 'layouts/landingPage1';
#import 'layouts/landingPage2';
#import 'layouts/pagination';
#import 'layouts/footer';
//userMenu
#import 'layouts/menu';
It would be really helpfull if gulp gave some kind of feedback in the commandline when run.
My gulp.js
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Less
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.sass('app.scss');
});
Okay, so I finally figured where I went wrong.
I thought app in mix.sass('app.sass'); was a path variable, and . was the equivalent to / like with blade directory seperators, and then sass was the folder name. It turned out app.sass was a filename. Do'h...
When I renamed my path to: resources/assets/sass and then specified:
elixir(function(mix) {
mix.sass('styles.scss');
});
Gulp outputted the file here: public/css/styles.css
Hope this helps others that makes the same false assumptions like me.
I have been using foundation to develop a Wordpress theme by creating a custom build on the website and including the required files in my theme.
The theme structure (simplified) is so:
Theme Root
|-- 404.php
|-- _
| |-- inc
| | |-- css
| | | |
| | | `-- foundation.min.css
| | |-- images
| `-- js
| |-- foundation.min.js
| `-- modernizr.js
|-- theme.css
|-- theme.scss
My issue is that I would like to customise the SCSS variables, e.g.:
/* Background color for the top bar */
$topbar-bg: #111;
And have tried to include the necessary components:
#import "foundation/components/topbar";
$include-html-top-bar-classes: $include-html-classes;
Clearly it isn't finding the classes as there is no compass project or appropriate SCSS files to import/include, so this is where my question comes in.
I've installed the foundation gem, and am able to create a new Compass project, but I'm just wondering how to structure things and setup/update my Wordpress theme as a Compass project so I can set the variables in _settings.scss?
I'm just a bit confused as to how the 'foundation' way would be to go about incorporating it into a Wordpress theme so that I can customise the necessary SCSS variables while maintaining a standard Wordpress theme structure?
Depending on what level of integration you're looking for you need to create the foundation project in your theme's template directory. I use Foundation 4, SCSS & SMACSS mostly and here's a quick CL snippet I have for this:
compass create templatename -r zurb-foundation --using foundation; cd templatename/sass; mkdir {functions,layouts,mixins,modules,vendor}; open ../;
Now, that said if the theme is already in existence you will want to create templatename with . as it means use the folder you're in already. I don't have a good CL way to do Foundation 5 yet because most of my projects rely on IE compatibility still. Hopefully this gets you going in the right direction, but with the compass create you'll be able to use watch & compile and import different things.
Also, if you're interested in SMACSS (which is awesome) check out http://smacss.com