While webpack seems to support a wide variety of detailed configuration options, I only want to accomplish the simple task of taking a single css source file located at project/frontend/static/css/style.css and outputting a minified version of that css file to project/frontend/static/css/style.min.css. I can't seem to find anything in the documentation of webpack that discusses this, as I am not importing my CSS from JS, just linking it in the HTML head the old fashioned way, so all I want to output is a plain CSS file, just minified.
With webpack you may like to use mini-css-extract-plugin
npm install --save-dev mini-css-extract-plugin
This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.
It builds on top of a new webpack v4 feature (module types) and requires webpack 4 to work.
Please look at the documentation for more info
https://webpack.js.org/plugins/mini-css-extract-plugin/
Related
I have a fairly simple webpack project - built using the Webpack guide. See https://github.com/timburgess/webpack-postcss-tailwind
There is a style.css in the src directory but there is no .css being added to the /dist directory on build.
Reading further, any css should be added as an inline style and that's not occuring.
Resolved with https://github.com/webpack-contrib/mini-css-extract-plugin per Richards answer.
Webpack will bundle the css files referenced via import statements in your source javascript files into the output javascript file (bundle.js). You'll see the classes being applied to the webapp at runtime via inline <style> tags applied dynamically to the html.
Many developers do not think this behaviour appropriate and will use a special plugin to get webpack to produce seperate bundled .css files that you then reference in your html using the traditional (and caching friendly) <link rel="stylesheet" type="text/css" href="bundle.css"> tag. See:
https://github.com/webpack-contrib/mini-css-extract-plugin
I haven't used SASS or SCSS in anything besides codepen before so apologies if this is a basic question, but my CSS was working fine, but I wanted to nest some tags, and when I setup the SCSS and SASS dependencies and changed my filename to .scss, all of my formatting went away. I read something somewhere about importing an scss file into the css file, but I'm not really sure how to accomplish that.
Here's a link to the code sandbox: https://codesandbox.io/s/oj15rk1vw9
Use the Parcel Bundler template instead of the create-react-app template
Also if you're using react add react and react-dom as dependencies since the Parcel Bundler template only comes with parcel as a dev dependency
https://codesandbox.io/s/q7877ov756
If you just change all instances of style.css to style.scss then it'll work
I am new to sass/scss and want to know how I can use sass file in my HTML project?
Do I have to first compile it into CSS with command line or anything else that compiles scss/sass runtime into css file at a time when webpage loads into browser?
So any help?
There are many options to create a Project working with SASS, but the most common is using Compass, I see you're new to it, I strongly recommend you read a Tutorial about Compass, after understanding this you should look others options to use the same SASS like working with gulp, gulp-sass, node-sass, browser-sync, and many other options to use the same Tool.
Forgive me if this is naive, but I am used to using just CSS. Sass seems pretty cool and I'm down to learn it, but for some reason many of the Javascript or jQuery plugins I'm downloading have both a CSS and SCSS file associated with the stylesheet. I don't want to have to be editing two files to get results on the page, why would both be there when they seem like copies except for a few key areas? See image below, seems like there is an extra CSS file per SCSS. Is that because some browsers cannot compile the SCSS?
CSS and SCSS in same directory
Is that because some browsers cannot compile the SCSS?
Yes. There is a command line utility which converts the .scss to .css. Probably the .map file is a reverse-conversion aid for browser inspectors that understand it.
Whenever I have generated files (like a .min.js, or in your case .css that came from a .scss), I make sure the appropriate command-line conversion tool is executed automatically as part of my build script.
I'm not sure what kind of build system you are using, but there is some command line tool for conversion that will need to be executed.
You are not expected to manually update both formats. SCSS to CSS command-line converters existed long before any browser (is there one yet?) started to support SCSS.
No browser (at least major) is able to directly use SASS (or LESS). You always need to compile scss files to css, before you could use them.
You can compile css by build tools like grunt or gulp. You can even configure it to watch updates in scss files and recompile css if anything was changed.
You could have following types of files after build:
style.scss <- this is source file
style.css <- this is css file created from SASS file
style.min.css <- this is css file minified
style.css.map <- this is source map of scss file
Here you can read why css files are minified. Here you can read what are source maps for.
Coming from a Compass/Sass background. Working on a Bootstrap/KendoUI Less project that's compiling with Grunt.
In Compass, a config option exists for "add_import"path" http://compass-style.org/help/documentation/configuration-reference/
What it allows you to do is set a hierarchy for SASS compilation based on file structure. So if I had a base SASS workflow/files structure that looked like this:
../
/default
style.scss
header.scss
/child
header.scss
And I had set /child as the primary directory and /default as an import path, it would compile the SASS in /child and extract from /defaultonly what wasn't in /child. Essentially, it's a way to override files instead of editing core files.
I'm looking to replicate this process through a grunt module to avoid altering core bootstrap or kendoUI files while being able to still override them if necessary, without !important tags or other ugly solutions.