It is not trivial to compile an SCSS file with Webpack, which is not included in the JS file, into its own CSS file. This post shows you how to do that.<\/p>\n\n\n\n\n\n\n\n
Update from September 6, 2018:<\/strong> I updated the post to show a solution with Webpack 4.<\/p>\n\n Update from October 28, 2022:<\/strong> The css-loader syntax changed, as Nick pointed out in his comment<\/a>.\n<\/div>\n\n\n\n I needed this because I had to use Webpack for a project and did not want to use another tool for compiling the SASS. At the end of my search, the solution<\/a> was to use the extract-loader<\/a>.<\/p>\n\n\n\n This is my With that, Webpack compiles the These are the dev dependencies from my Now, if I run the It is not trivial to compile an SCSS file with Webpack, which is not included in the JS file, into its own CSS file. This post shows you how to do that.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","webmentions_disabled_pings":false,"webmentions_disabled":false,"lazy_load_responsive_images_disabled":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-4240","post","type-post","status-publish","format-standard","hentry","category-web-development"],"wp-worthy-pixel":{"ignored":false,"public":"644f5aebac7a443ca1fee0dd1b041130","server":"vg07.met.vgwort.de","url":"https:\/\/vg07.met.vgwort.de\/na\/644f5aebac7a443ca1fee0dd1b041130"},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/comments?post=4240"}],"version-history":[{"count":5,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4240\/revisions"}],"predecessor-version":[{"id":6204,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4240\/revisions\/6204"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=4240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=4240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=4240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}webpack.config.json<\/code>:<\/p>\n\n\nconst<\/span> path = require<\/span>('path'<\/span>);\n\nmodule<\/span>.exports = {\n\tmode<\/span>: process.env.NODE_ENV === 'production'<\/span> ? 'production'<\/span> : 'development'<\/span>,\n\tentry<\/span>: ['.\/blocks\/index.js'<\/span>, '.\/blocks\/editor.scss'<\/span>, '.\/blocks\/frontend.scss'<\/span>],\n\toutput<\/span>: {\n\t\tpath<\/span>: path.resolve(__dirname, 'assets'<\/span>),\n\t\tfilename<\/span>: 'js\/editor.blocks.js'<\/span>,\n\t},\n\tmodule<\/span>: {\n\t\trules<\/span>: [\n\t\t\t{\n\t\t\t\ttest<\/span>: \/\\.scss$\/<\/span>,\n\t\t\t\tuse<\/span>: [\n\t\t\t\t\t{\n\t\t\t\t\t\tloader<\/span>: 'file-loader'<\/span>,\n\t\t\t\t\t\toptions<\/span>: {\n\t\t\t\t\t\t\tname<\/span>: 'css\/[name].blocks.css'<\/span>,\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tloader<\/span>: 'extract-loader'<\/span>\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tloader<\/span>: 'css-loader?-url'<\/span>\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tloader<\/span>: 'postcss-loader'<\/span>\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tloader<\/span>: 'sass-loader'<\/span>\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n};<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n.\/blocks\/editor.scss<\/code> to the editor.blocks.css<\/code> inside the assets\/css<\/code> directory and the .\/blocks\/frontend.scss<\/code> to the assets\/css\/frontend.blocks.css<\/code>. The postcss-loader<\/code> runs Autoprefixer. To get that working, I created a postcss.config.js<\/code> with the following content:<\/p>\n\n\nmodule<\/span>.exports = {\n\tplugins<\/span>: {\n\t\t'autoprefixer'<\/span>: {}\n\t}\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\npackage.json<\/code> (a few are not necessary for the Webpack task) and the NPM tasks to run Webpack:<\/p>\n\n\n\"scripts\"<\/span>: {\n \"build:dev\"<\/span>: \"webpack\"<\/span>,\n \"build:production\"<\/span>: \"cross-env NODE_ENV=production webpack\"<\/span>,\n \"watch\"<\/span>: \"webpack --watch\"<\/span>\n},\n\"devDependencies\"<\/span>: {\n \"@babel\/core\"<\/span>: \"^7.0.0\"<\/span>,\n \"@wordpress\/babel-preset-default\"<\/span>: \"^2.1.0\"<\/span>,\n \"@babel\/runtime-corejs2\"<\/span>: \"^7.0.0\"<\/span>,\n \"autoprefixer\"<\/span>: \"^9.1.3\"<\/span>,\n \"babel-loader\"<\/span>: \"^8.0.0\"<\/span>,\n \"cross-env\"<\/span>: \"^5.2.0\"<\/span>,\n \"css-loader\"<\/span>: \"^1.0.0\"<\/span>,\n \"extract-loader\"<\/span>: \"^2.0.1\"<\/span>,\n \"file-loader\"<\/span>: \"^2.0.0\"<\/span>,\n \"node-sass\"<\/span>: \"^4.9.3\"<\/span>,\n \"postcss-cli\"<\/span>: \"^6.0.0\"<\/span>,\n \"postcss-loader\"<\/span>: \"^3.0.0\"<\/span>,\n \"sass-loader\"<\/span>: \"^7.1.0\"<\/span>,\n \"webpack\"<\/span>: \"^4.17.2\"<\/span>,\n \"webpack-cli\"<\/span>: \"^3.1.0\"<\/span>\n},<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nwebpack<\/code> command, I get my SASS compiled into CSS.<\/p>\n","protected":false},"excerpt":{"rendered":"