Forum : [WEBPACK] SASS bootstrap

Bonjour tous le monde !

Je débute avec webpack et j'essaye d'apprivoiser l'outil en bidouillant.
J'essaye de me faire un projet où j'importerai bootstrap mais en sass.

j'ai donc fait comme ceci :

const path = require('path');
const webpack = require("webpack");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = env =>{
    let dev = env.NODE_ENV === 'dev';

    let config = {
        entry : './assets/js/app.js',
        output : {
            path : path.resolve('./dist'),
            filename : 'bundle.js'
        },
        watch : dev,
        module : {
            rules: [{
                test: /\.scss$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "sass-loader" // compiles Sass to CSS
                }]
            }]
        },
        plugins : [
            new webpack.ProvidePlugin({
                jQuery: 'jquery',
                $: 'jquery',
                jquery: 'jquery'
            })
        ]
    };

    if (!dev){
        config.plugins.push(new UglifyJSPlugin())
    }

    return config;
}

dans mon fichier scss je fais juste un import de bootstrap sass :

@import "~bootstrap-sass";

Quand je compile j'ai une erreur :

ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./assets/css/app.scss
Module build failed: 
if (typeof jQuery === 'undefined') {
  ^
      Invalid CSS after "if": expected "{", was "(typeof jQuery === "
      in /Users/deshiloh/Sites/test/webpack/node_modules/bootstrap-sass/assets/javascripts/bootstrap.js (line 7, column 4)
 @ ./assets/css/app.scss 4:14-121
 @ ./assets/js/app.js

J'ai pourtant importé jQuery de façon automatique mais pourtant apparemment il n'est pas défini ici.
Je suis un peu bloqué ^^'
Merci d'avance pour l'aide :)

8 réponses

Kenor

L'erreur n'indique pas que tu n'as pas importé jQuery.

Si je comprend bien, tu as du javascript dans ton fichier app.scss, il pense que la ligne qu'il indique est du CSS (ou SASS) et te dit qu'il y a une erreur de syntaxe "invalid CSS".

Il contient quoi ce fichier app.scss ?

Manuel Alvarez-Iglisias

Auteur

@import "~bootstrap-sass";

Kenor

Ah non pardon, c'est dans "bootstrap.js" que se trouve le JS.
Du coup "~bootstrap-sass" doit contenir logiquement du JS.
Ce qui ne devrait pas être le cas dans du SASS.

Soit tu dois l'importer via import en JS (ou require), soit tu n'importes pas le bon fichier ?
(ce qui ne signifie pas que ça ne va pas générer du CSS quand même, sachant qu'en JS, il est possible de faire de l'import de css/less/sass etc, dès lors que webpack est config comme il faut)

Manuel Alvarez-Iglisias

Auteur

Oui "~bootstrap-sass" contient du js, donc comme tu dis je dois mal importer celui ci. je pensais que "~bootstrap-sass" suffirai largement.

Kenor

il peut suffire, mais, sans connaitre précisemment ce plugin, il y a des chances qu'il faille l'importer en JS, ce dernier te générera un fichier JS et un fichier CSS propre (dès lors que ton webpack est config pr le permettre)

Manuel Alvarez-Iglisias

Auteur

effectivement je faisais un import du fichier scss depuis le js. j'ai appelé directement bootstrap dans le js j'ai pas eu d'erreur.
Par contre il semble ne pas s'appliquer, j'ai oublié une étape ?

Kenor

Ton webpack doit extraire le CSS normalement, ce qu'il ne fait pas actuellement.

Donc tu dois utiliser "extract-text-webpack-plugin" pour ça (et ça change un peu toute la config)

Manuel Alvarez-Iglisias

Auteur

J'ai mis en place le extract, par contre je pense que j'ai quand même mal importer bootstrap sass car ça ne fonctionne pas.

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

module.exports = env =>{
    let dev = env.NODE_ENV === 'dev';

    let config = {
        entry : [
            './assets/js/app.js'
        ],
        output : {
            path : path.resolve('./dist'),
            filename : 'bundle.js'
        },
        watch : dev,
        module : {
            rules: [
                {
                    test: /\.scss$/,
                    use:ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: [{
                            loader: "css-loader" // translates CSS into CommonJS
                        }, {
                            loader: "sass-loader" // compiles Sass to CSS
                        }]
                    })
                },
                {
                    test: /\.(png|jpg|gif|ttf|svg|woff)$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {}
                        }
                    ]
                }
            ]
        },
        plugins : [
            new ExtractTextPlugin({
                filename: 'style.css'
            }),
            new webpack.ProvidePlugin({
                jQuery: 'jquery',
                $: 'jquery',
                jquery: 'jquery'
            })
        ]
    };

    if (!dev){
        config.plugins.push(new UglifyJSPlugin())
    }

    return config;
}

le fichier app.js

import bootstrap from "bootstrap-sass"