1

I am using webpack and sass-loader to generate a custom.css file in my public directory. My webpack.config file has the following:

// webpack.config.js

var ExtractTextPlugin = require("extract-text-webpack-plugin");

...

if(process.env.NODE_ENV === 'development'){
  var loaders = ['react-hot','babel']
} else {
  var loaders = ['babel']
}
module.exports = {
  devtool: 'eval',
  entry: './app-client.js',
  output: {
    path: __dirname + '/public/dist',
    filename: 'bundle.js',
    publicPath: '/dist/'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: loaders,
      exclude: /node_modules/
    },
    // Extract SCSS
    **{ test: /\.scss$/,
      loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!sass-loader") },]**,
    include: __dirname + '/src/sass'

  },
  plugins: [
    new ExtractTextPlugin("./public/css/style.css", {allChunks: false})

 ]
};

The css is called in the .views/index.html file:

<link href="/css/custom.css" rel="stylesheet">

The development scripts in my package.json are:

    "webpack-dev-server": "NODE_ENV=development PORT=8080 webpack-dev-server --content-base public/ --hot --inline --devtool inline-source-map --history-api-fallback",
    "development": "cp views/index.html public/index.html && NODE_ENV=development webpack && npm run webpack-dev-server"

In ./components/App.js I have:

//stylesheets import scss from 'custom.scss'

But I get the following error:

RROR in ./components/App.js
Module not found: Error: Cannot resolve module 'custom.scss' in /Users/koko1/apps/bamba-2017/components
 @ ./components/App.js 38:18-40
HGB
  • 2,157
  • 8
  • 43
  • 74
  • Do you have any errors? Do you include your `scss` in a project via `require()` or `import`? – GProst Feb 02 '17 at 02:05
  • Hi, there are no errors, the custom.css file does not get created. Do you still have to require scss even if it is referenced from the index.html as per above? – HGB Feb 02 '17 at 12:49

2 Answers2

0

I assume, nothing is created because extract-text-webpack-plugin doesn't transform link's in html files into separate css. It moves every require('any-file-name.scss') (in your config case) in entry chunks into a separate scss file.

GProst
  • 9,229
  • 3
  • 25
  • 47
  • If I understand right, I must make the custom.scss a dependency and not rely on the extract-text-webpack-plugin to output it as a .css file in my public folder. This is very misleading, what is the purpose of the plugin? I have updated the code above with the path to the scr/scss folder (`includePaths: [path.resolve(__dirname, "./src/sass")]`) and requiring it in my root>components>App.js file but now I am getting a module not solved error. – HGB Feb 02 '17 at 14:09
  • 1
    The purpose of extract-text-webpack-plugin is to bundle multiple (or one) not `.js` files into one external file. You have to use `require()` or `import` because webpack will never see it if it is not imported (webpack uses entry points for start and then from that point it finds all included modules). You can import extracted files into html file automatically with [`html-webpack-plugin`](https://github.com/jantimon/html-webpack-plugin). – GProst Feb 02 '17 at 14:37
  • Thanks, what is the correct syntax? I have tried both require and import and it cannot solve the path for ./src/scss/custom.scss file. – HGB Feb 02 '17 at 14:52
  • Hard to say... syntax is correct, it just somehow does'n find it. Is `custom.scss` located in `/components/` directory? – GProst Feb 02 '17 at 15:00
  • It's in `./src/scss`. I had to upgrade webpack to 2 in order for it to work properly with extract-text-webpack-plugin and since I have been getting this error: `throw new Error("Module '" + loader.path + "' is not a loader (must have normal or pitch function)");` – HGB Feb 02 '17 at 15:28
0

Ok, I got this working so here is what happened:

  1. My version of extract-text-webpack-plugin did not meet it's webpack version dependency (UNMET PEER DEPENDENCY webpack@1.12.6)

  2. I upgraded to "webpack": "^2.2.1" and kept getting a bunch of obscure errors, especially this one: /node_modules/loader-runner/lib/loadLoader.js:35 throw new Error("Module '" + loader.path + "' is not a loader (must have normal or pitch function)");

What this means is that whenever you use a loader in webpack 2 in your webpack.config.js you need to specify that it is is a loader. So something like:

loaders: ['style', 'css']

will throw an error and needs to be corrected to:

loaders: ['style-loader', 'css-loader']

  1. Another thing is when you create your ExtractTextPlugin plugin instance, specify the filename of your output file so:

new ExtractTextPlugin({ filename: 'css/[name].css', disable: false, allChunks: true })

After I did all the above and added //stylesheets require('../src/sass/test.scss'); to my App.js file, the css is now created in the correct public/css/test.css file.

If anyone can think of a better option to require, let me know.

HGB
  • 2,157
  • 8
  • 43
  • 74