Search code examples
node.jswebpacksass-loader

Webpack path variable error

I am trying to setup sass with my webpack config file but I get the following error when running webpack:

yarn run v1.5.1
$ webpack --config webpack.config.js --mode development
/var/www/html/node_modules/webpack/lib/TemplatedPathPlugin.js:43
                throw new Error(
                ^

Error: Path variable [contenthash] not implemented in this context: [name].[contenthash].css
    at fn (/var/www/html/node_modules/webpack/lib/TemplatedPathPlugin.js:43:11)
    at fn (/var/www/html/node_modules/webpack/lib/TemplatedPathPlugin.js:31:16)
    at String.replace (<anonymous>)
    at replacePathVariables (/var/www/html/node_modules/webpack/lib/TemplatedPathPlugin.js:98:5)
    at SyncWaterfallHook.eval [as call] (eval at create (/var/www/html/node_modules/tapable/lib/HookCodeFactory.js:17:12), <anonymous>:7:16)
    at MainTemplate.getAssetPath (/var/www/html/node_modules/webpack/lib/MainTemplate.js:387:31)
    at Compilation.getPath (/var/www/html/node_modules/webpack/lib/Compilation.js:1798:28)
    at getPath (/var/www/html/node_modules/extract-text-webpack-plugin/dist/index.js:315:51)
    at ExtractTextPlugin.extractedChunks.forEach.extractedChunk (/var/www/html/node_modules/extract-text-webpack-plugin/dist/index.js:323:83)
    at Array.forEach (<anonymous>)
    at compilation.hooks.additionalAssets.tapAsync.assetCb (/var/www/html/node_modules/extract-text-webpack-plugin/dist/index.js:301:25)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/var/www/html/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/var/www/html/node_modules/tapable/lib/Hook.js:35:21)
    at hooks.optimizeTree.callAsync.err (/var/www/html/node_modules/webpack/lib/Compilation.js:946:32)
    at _err0 (eval at create (/var/www/html/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)
    at _async2.default.forEach.err (/var/www/html/node_modules/extract-text-webpack-plugin/dist/index.js:296:11)
    at /var/www/html/node_modules/async/dist/async.js:473:16
    at iteratorCallback (/var/www/html/node_modules/async/dist/async.js:1050:13)
    at /var/www/html/node_modules/async/dist/async.js:958:16
    at _async2.default.forEach.err (/var/www/html/node_modules/extract-text-webpack-plugin/dist/index.js:274:13)
    at /var/www/html/node_modules/async/dist/async.js:473:16
    at iteratorCallback (/var/www/html/node_modules/async/dist/async.js:1050:13)
    at /var/www/html/node_modules/async/dist/async.js:958:16
    at compilation.rebuildModule.err (/var/www/html/node_modules/extract-text-webpack-plugin/dist/index.js:261:26)
    at callback (/var/www/html/node_modules/webpack/lib/Compilation.js:782:35)
    at processModuleDependencies.err (/var/www/html/node_modules/webpack/lib/Compilation.js:804:5)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
error An unexpected error occurred: "Command failed.
Exit code: 1

Here is my webpack.conf.js:

const path = require('path');

// Webpack Plugins

//enables storing to files instead of within javascript bundle
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractSass = new ExtractTextPlugin({
    filename: "[name].[contenthash].css", //saves css to single file
    disable: process.env.NODE_ENV === "development" //injects css into html if in dev mode
});
/*============================================================================*/

module.exports = {
  entry: './src/js/index.js', //apps bootstrap javascript file
  output: {
    filename: 'main.js', //name of js file everything is bundled to
    path: path.resolve(__dirname, 'dist') //path where filename saved to
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: extractSass.extract({
            use: [{
                loader: "css-loader" //translates CSS into CommonJS - resolves css includes
            }, {
                loader: "sass-loader" // compiles Sass to CSS
            }],
            // use style-loader in development
            fallback: "style-loader" // injects css from the bundled js file
        })
      }
    ]
  },
  plugins: [
      extractSass
  ]
};

My package.json:

{
  "name": "test-webpack",
  "version": "1",
  "description": "",
  "private": true,
  "license": "MIT",
  "dependencies": {},
  "devDependencies": {
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "node-sass": "^4.8.3",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.20.3",
    "webpack": "^4.4.1",
    "webpack-cli": "^2.0.13"
  },
  "scripts": {
    "dev": "webpack --config webpack.config.js --mode development",
    "build": "webpack --config webpack.config.js --mode production"
  }
}

I have been following the official documentation to setup sass-loader here: https://webpack.js.org/loaders/sass-loader/#examples

Does anyone know why the variable [contenthash] not implemented in this context: [name].[contenthash].css?

Solution

  • You need to downgrade webpack package to v4.2.0 . It looks like extract-text-webpack-plugin v4.0.0-beta.0 doesn't support webpack v4.4.1.

    You can read more about this issue here github issue