Não consigo compilar o SASS no Webpack de jeito nenhum! | Webpack: Manipulando módulos na sua webapp

4
respostas

Referente ao curso Webpack: Manipulando módulos na sua webapp

por André Ferraz de Almeida

| 384.9k xp | 200 posts

Front-end Pleno

Boa tarde! Estou há uns 40 minutos tentando configurar o SASS no Webpack 5 e de maneira nenhuma eu estou conseguindo!

Eu tentei até com o CSS simples e não consegui fazer o Webpack buildar os arquivos no index.js, será que alguém pode me ajudar?

Minha config

const path = require('path')
,{ CleanWebpackPlugin } = require('clean-webpack-plugin')
,BrowserSyncPlugin = require('browser-sync-webpack-plugin')
,HtmlWebpackPlugin = require('html-webpack-plugin')
,MiniCssExtractPlugin = require('mini-css-extract-plugin')
// ,loader = require('sass-loader')
,webpack = require('webpack');

let plugins = [];

plugins.push(new CleanWebpackPlugin(),
),

plugins.push(new HtmlWebpackPlugin({
        chunks: ['index'],
        template: './src/index.html',
        filename: './index.html',
      })
),
plugins.push(
    new MiniCssExtractPlugin({
        filename: 'assets/styles/[name].css',
        // chunkFilename: '[id].css',
    }),
)

module.exports = {
    // watch: true,
    mode: process.env.NODE_ENV == 'production' ? 'production' : 'development',
    devtool: 'source-map',
    devServer: {
        open: true,
        contentBase: 'dist'
    },

    entry: {
        'index': ['./src/assets/js/index.js']
    },
    output: {
        filename: "assets/js/[name].bundle.js",
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'dist'
    },

    module: {
        rules: [
            //CSS, SASS, Autoprefixer
            {
                test:/\.(s|a)css$/,
                exclude: /node_modules/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    "autoprefixer"
                                ]
                            }
                        }
                    },
                    'sass-loader'
                ]
            },

            {
                test: /\.(html)$/,
                use: {
                  loader: 'html-loader'
                }
            },

            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                }
            }
        ]
    },
    plugins
}

As pastas

src
-- assets
---- js
      index.js
----style
      _base.scss

Os arquivos importados no index.js

import '../styles/_base.scss'

É isto, to no início do projeto e ja estou injuriado pois sem o SASS eu não faço estilo KKKK

4 respostas

por André Ferraz de Almeida

| 384.9k xp | 200 posts

Front-end Pleno

08/01/2021

Tentei voltar pro Webpack 4 e também não deu

const path = require('path')
,HtmlWebpackPlugin = require('html-webpack-plugin')
,MiniCssExtractPlugin = require('mini-css-extract-plugin')




module.exports = {
    // watch: true,
    mode: process.env.NODE_ENV == 'production' ? 'production' : 'development',
    devtool: 'source-map',
    entry: {
        index: ['./src/assets/js/index.js'],
    },
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'dist'
    },
    devServer: {
        open: true,
        contentBase: 'dist',
        publicPath: 'dist',
        watchContentBase: true,
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                }
            },
            {
                test: /\.css$/i,
                use: {
                    loader: 'style-loader', 
                    loader: 'css-loader',
                    loader: MiniCssExtractPlugin.loader, 
                },
            },
            {
                test: /\.s[ac]ss$/i,
                use: {
                    loader: 'sass-loader',
                    loader: 'style-loader',
                    loader: 'css-loader',
                } 
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
                chunks: ['index'],
                template: './src/index.html',
                filename: './index.html',
            }),
    ]
}

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

11/01/2021

Fala ai André, tudo bem? Com Webpack 5 eu ainda não cheguei a configurar, mas, com o 4 segue um exemplo:

const HTMLWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const webpack = require('webpack')

const PUBLIC_DIR = 'public'

module.exports = {
    devServer: {
        contentBase: path.join(__dirname, PUBLIC_DIR),
        hot: true,
        port: 3340
    },
    entry: path.resolve(__dirname, 'src', 'main.js'),
    mode: 'development',
    module: {
        rules: [
            {
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: [
                        '@babel/preset-env'
                    ]
                },
                test: /\.js$/
            },
            {
                exclude: /node_modules/,
                test: /\.sass$/,
                use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    },
                    { loader: 'sass-loader' },
                ]
            }
        ]
    },
    output: {
        filename: '[name]-[hash].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: path.resolve(__dirname, PUBLIC_DIR, 'index.html')
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
    target: 'web'
}

Dependencias:

"devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.0",
    "html-webpack-plugin": "^3.2.0",
    "sass": "^1.32.2",
    "sass-loader": "^10.1.1",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.14"
  }

Espero ter ajudado.

por André Ferraz de Almeida

| 384.9k xp | 200 posts

Front-end Pleno

12/01/2021

Opa chefe, beleza? Vou tentar configurar desta forma com o 4 pra ver se funciona agora.

Eu havia desistido do Webpack puro e ido direto pro Vue.js que consegui configurar tudo certinho lá, mas vou retomar o estudo do Webpack se funcionar :D Obrigado pela resposta!

E uma pergunta, esse plugin serve pra que?

new webpack.HotModuleReplacementPlugin()

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

13/01/2021

Fala André, tudo bem e por ai? Show de bola

O HotModuleReplacementPlugin é para ativar o hot reload do Webpack, basicamente seria uma forma de atualizar os assets sem recarregar a página completa (live reload).

Espero ter ajudado.