Completely Blank (no css) _s WordPress Starter Theme - Page 2
In the src/js/index.js javascript entrypoint file, import the style Sass entrypoint as follows.
index.js
import '../sass/style.scss'
Add this bit of code to the .babelrc congfiguration file. Consult the babel docs for config changes based on the babel version as needed.
.babelrc
{
"presets": ["env"]
}
Add this code to require the autoprefixer postcss plugin to the postcss.config.js configuration file.
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
The package.json file defines our autoprefixer browser support. In this example, we target browsers greater than 2% according to global usage statistics and Internet Explorer versions greater than 9.
package.json
{
"name": "blank",
"version": "1.0.0",
"description": "",
"main": "index.js",
"browserslist": [
"> 2%",
"ie > 9"
],
...
}
npm-run-script
To run the dev and prod webpack builds, add these webpack commands to the scripts node directly below the browserlist object we just added.
package.json
...
"browserslist": [
"> 2%",
"ie > 9"
],
"scripts": {
"dev": "webpack --mode=development --watch --progress --colors --config webpack/dev.config.js",
"build": "webpack --mode=production --progress --hide-modules --config webpack/prod.config.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
...
}
Sass
Now we’re finally ready to make some changes to the Sass files. Open up src/sass/style.scss in your code editor and comment out all of the imports except for variables and mixins. This will reduce the transpiled style.css to nothing but the required WordPress theme info comment block at the top. For example:
style.scss
...
--------------------------------------------------------------*/
@import "variables-site/variables-site";
@import "mixins/mixins-master";
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
// @import "normalize";
/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
// @import "typography/typography";
/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
// @import "elements/elements";
/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
// @import "forms/forms";
/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
// @import "navigation/navigation";
/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
// @import "modules/accessibility";
/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
// @import "modules/alignments";
/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
// @import "modules/clearings";
/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
// @import "site/secondary/widgets";
/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
// @import "site/site";
/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
// @import "modules/infinite-scroll";
/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
// @import "media/media";
In the terminal, issue the development build command which watches the sass files for any changes and builds accordingly. e.g.,
npm run dev
The terminal output should include something similar to this.
...
0% compiling
webpack is watching the files…
Hash: d95acca06d7085485894
Version: webpack 4.16.4
Time: 705ms
Built at: 2018-08-05 07:51:05
Asset Size Chunks Chunk Names
../style.css 2.89 KiB app [emitted] app
app.js 5.05 KiB app [emitted] app
Entrypoint app = ../style.css app.js
[./js/index.js] 38 bytes {app} [built]
[./sass/style.scss] 39 bytes {app} [built]
...
Inspect the transpiled style.css and there should not be any css, only comments.
If you only want the normalize and accessibility css, uncomment the normalize and modules/accessibility imports. For example,
style.scss
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
@import "normalize";
...
/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
@import "modules/accessibility";
If you have not cancelled the npm run dev process, the watch should pick up the changes to the src/sass/style.scss file when you save it and rebuild style.css
To create a production build, cancel the dev process Ctrl + c and issue the npm run build command. Inspect the style.css and notice that the css has been optimized and only the comment required by WordPress at the top of the file remains.