0

Using sass-loader I was able to compile scss as expected by adding another entry point like the below.

entry: ['./src/assets/scripts/main.js', './src/assets/styles/_main.scss'],

However, I thought I could define a path to my source files using the sass-loader option includePaths like the below.

const path = require('path');

options: {includePaths: ['path.resolve(__dirname, "src/assets/styles")']}

This doesn't seem to work. Am I misunderstanding this? Also, is there a disadvantage to adding a bunch of entry point an array like I did. Thanks.

UPDATED

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const config = {
    entry: './src/assets/scripts/main.js',
    output: {
        path: path.resolve(__dirname, 'dist/scripts'),
        filename: 'main.js'
    },
    module: {
        rules: [
          {
            test: /\.scss$/,
            //include: [ path.resolve(__dirname, 'src/assets/styles') ],
            use: ExtractTextPlugin.extract({
            //fallback: 'style',
                        use: [{
                          loader: 'css-loader', // translates CSS into CommonJS modules
                        },  {
                          loader: 'sass-loader', // compiles Sass to CSS
                                        options: {
                       includePaths: [path.resolve(__dirname, "src/assets/styles")]
                }
                        }]

                })
          }
        ]
    },

    plugins: [  
        new ExtractTextPlugin('styles.css')
    ]
};

module.exports = config;
Work-Together2013
  • 1,171
  • 1
  • 7
  • 11

1 Answers1

1

You understand it correctly, includePaths specifies directories from which you can @import scss files.

I suppose you have to remove quotes in you config:

options: {includePaths: [path.resolve(__dirname, "src/assets/styles")]}
Daniel Khoroshko
  • 2,623
  • 15
  • 26
  • I originally had it without quotes, I accidentally copied one of my mess around tweaks. I updated my question with my basic webpack config and I just can't seem to get it to output. Although, as I said if I just add in another entrypoint it works as expected. – Work-Together2013 Jan 26 '18 at 00:25
  • I'm not aware of you folder structure, but could you make sure that `path.resolve(__dirname, "src/assets/styles")` actually resolves to a proper path? If it does, then how is the contents of your `_main.scss`? Btw it doesn't need to prefixed – Daniel Khoroshko Jan 26 '18 at 00:46
  • Hi. So, if I add another entry point and use 'entry: ['./src/assets/scripts/main.js', './src/assets/styles/_main.scss'], ' it resolves fine. So shouldnt it work for the path.resolve as well..? In my _main.scss I have (at)import "~bootstrap/scss/bootstrap"; and (at)import "custom"; pointing to different files. Again, it works if I just add entry points in an array at top. However, I can't seem to get it to work with includePaths or using include. Maybe it has something to do with the extract text plugin. – Work-Together2013 Jan 26 '18 at 01:20
  • Hi. Bit you need to specify one entry point for your scss anyway, or import it from your js modules, otherwise how will webpack know that it should bundle styles... – Daniel Khoroshko Jan 26 '18 at 01:31
  • Ah that is where I am confused. I am new to webpack. So, I need to add the entry point for scss like entry: ['./src/assets/scripts/main.js', './src/assets/styles/_main.scss'], . I thought the includePaths was another way to include it. Am I correct? – Work-Together2013 Jan 26 '18 at 01:31
  • you could add `import "main.scss";` into your index.js. the path should be relative and correct, of course – Daniel Khoroshko Jan 26 '18 at 01:32
  • Ok I will add the entry point like this: ['./src/assets/scripts/main.js', './src/assets/styles/_main.scss'], . I thought includePaths was another way to add it. I guess i'm just confused! – Work-Together2013 Jan 26 '18 at 01:35