0

I'm trying to use webpack for the first time and I would like to use SASS instead of CSS but I can't resolve a problem with my sass-loader.

my webpack.common.js:

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'js/main.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.(css|scss)$/,
                use: ['style-loader', 'css-loader', 
                    { 
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: [
                                require('autoprefixer')()
                            ]
                        }
                    },
                    'sass-loader']
            },
            {
                test: /\.(jpg|jpeg|gif|png)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 102400,
                            name: '[name].[ext]',
                            outputPath: 'images'
                        }
                    }
                ]
            },
            {
                test: /\.(woff(2)?|ttf|eof|svg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'fonts'
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                ]
            }
        ]
    }
}

I've already install sass-loader and node-sass package with npm and I load my webpack.common.js file in a webpack.dev.js file :

const merge = require('webpack-merge');
const common = require('./webpack.common');
const path = require('path');

module.exports = merge(common, {
    mode: 'development',
    devServer: {
        port: 3000,
        contentBase: path.join(__dirname, 'dist'),
        watchOptions: {
            ignored: /node_modules/
        }
    }
});

Honestly I don't think the problem is caused by this file. To run my app I use npm run dev.

Atleast, there is my sass file (in src/styles/styles.scss):

@import '~bootstrap/scss/bootstrap.scss';
@import '~@fortawesome/fontawesome-free/css/all.css';


body {
    background-color: #eee;
}

Do you know how can I resolve this problem ? I know this question was asked a lot of time, I searched on github and stackoverflow before post but I didn't succeed to make my app work.

Thank you in advance.

Yacine Chalabi
  • 1
  • Take a look at the following: https://stackoverflow.com/questions/52422220/sourcemap-with-sass-loader-and-postcss-loader-in-webpack/52422931#52422931 it might help you. I also doubt that `require('autoprefixer')()` is valid – SuperDJ Nov 30 '19 at 20:47
  • Thanks for your answer. I tryed to replace **require('autoprefixer')()** by a variable **autoprefixer()** declared at the beginning of the file linke this : **const autoprefixer = require('autoprefixer')** but it still doesn't work. I also checked your link and tryed this solution but it still doesn't work. – Yacine Chalabi Nov 30 '19 at 21:04
  • With `autoprefixer()` you say that it's a function while it isn't – SuperDJ Nov 30 '19 at 21:20
  • Thank you very much for your help, i fixed it ! It was cause of my package.json, I wrote "dev": "node_modules/.bin/webpack-dev-server --node webpack.dev.js"` except of `"dev": "node_modules/.bin/webpack-dev-server --config webpack.dev.js"` – Yacine Chalabi Nov 30 '19 at 21:39

0 Answers0