CODEWITHSUNDEEP
webpacksass-loader
Work-Together2013
Work-Together2013

Reputation: 1201

Defining path to scss files

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;

Upvotes: 0

Views: 2125

Answers (1)

Daniel Khoroshko
Daniel Khoroshko

Reputation: 2721

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")]}

Upvotes: 1

Related Questions