Problemas ao usar o CSS como módulo

Fuçando aqui, descobri que o problema acontece quando eu uso o extractTextPlugin. Sem ele, funciona normalmente, inclusive não tenho problema de FOUC.

Tem que verificar as versões do Webpack usadas pelo seu projeto Vue. Há bugs no Webpack abaixo da versão 3.1.

Mas em suma, tem alguma coisa no normalize que o Vue não esta curtindo, provavelmente carregamento de fonte, ou algo parecido. Tem quer ver o que o normalize usa (eu não uso normalize) e ver o que de diferente ele tem e ver qual loader deve ser usado com ele.

Ah, seu projeto é fora do Vue. Então, não deve ser bug, mas sim alguma coisa que o normalize contém que precisa de um loader.

Só de curiosidade, poste seu webpack.config.json e seu package.json.

Mas se você não tem FOUC, então esta tranquilo. Mas seria legal descobrirmos o motivo do extractTextPLugin não ter funcionado.

Estou com o mesmo projeto do curso Flavio (sem Vue), esse erro do Normalize foi ao importar o css do bootstrap.

webpack.config.js

const path = require("path");
const babiliPlugin = require("babili-webpack-plugin");
const extractTextPlugin = require("extract-text-webpack-plugin");

let plugins = [];

plugins.push(new extractTextPlugin('styles.css'));

// babiliPlugin = plugin para minificação de arquivo css | js
if (process.env.NODE_ENV == 'production') {
    plugins.push(new babiliPlugin());
}

module.exports = {
    entry: './app-src/app.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'dist'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: '/node_modules/',
                use: {
                    loader: 'babel-loader'
                }
            },
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            // {
            //     test: /\.css$/,
            //     use: extractTextPlugin.extract({
            //         fallback: 'style-loader',
            //         use: 'css-loader'
            //     })
            // },
            { 
                test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'url-loader?limit=10000&mimetype=application/font-woff' 
            },
            { 
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
            },
            { 
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'file-loader' 
            },
            { 
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'url-loader?limit=10000&mimetype=image/svg+xml' 
            }            
        ]
    },
    plugins
}

package.json

{
  "name": "client",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build-dev": "webpack --config webpack.config.js",
    "build-prod": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^3.3.7",
    "reflect-metadata": "^0.1.10"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-es2015-modules-systemjs": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "babili-webpack-plugin": "^0.1.1",
    "cross-env": "^5.0.1",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^0.11.2",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack": "^3.1.0",
    "webpack-dev-server": "^2.5.1"
  }
}

Compartilhe seu código (webpack.config.js) e package.json.

Olha, estou vendo que você atualizou alguns plugins do curso. Antes deu investigar (até porque, você é o primeiro aluno a reportar um problema nesta parte), certifique-se de estar usando as mesmas versões homologadas por mim no curso. Isso descartará a hipóteses de bugs.

Depois, compartilhe seu projeto no git sem a pasta node_modules.

Outra coisa, compartilhe o webpack.config.json comigo do jeito que esta dando erro, sem o comentário, exatamente como esta em sua máquina. Faça dar o erro e só depois compartilhe o arquivo. Preciso de uma imagem fiel dele.

Obrigado Flavio.

No princípio instalei com as versões conforme a vídeo aula, mas deu o mesmo erro, atualizei as dependências para ver se esse poderia ser o problema.

GitHub do projeto: https://github.com/coelhoadler/estudando-webpack

Testei seu projeto, removi o comentário do seu webpack.config.json. Ele ficou assim:

const path = require("path");
const babiliPlugin = require("babili-webpack-plugin");
const extractTextPlugin = require("extract-text-webpack-plugin");

let plugins = [];

plugins.push(new extractTextPlugin('styles.css'));

// babiliPlugin = plugin para minificação de arquivo css | js
if (process.env.NODE_ENV == 'production') {
    plugins.push(new babiliPlugin());
}

module.exports = {
    entry: './app-src/app.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'dist'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: '/node_modules/',
                use: {
                    loader: 'babel-loader'
                }
            },
             {
                 test: /\.css$/,
                 use: extractTextPlugin.extract({
                     fallback: 'style-loader',
                     use: {
                         loader: 'css-loader'
                     }
                 })
             },
            { 
                test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'url-loader?limit=10000&mimetype=application/font-woff' 
            },
            { 
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
            },
            { 
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'file-loader' 
            },
            { 
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
                loader: 'url-loader?limit=10000&mimetype=image/svg+xml' 
            }            
        ]
    },
    plugins
}

Funcionou perfeitamente aqui. Experimente fazer no seu projeto, dentro da pasta client, npm install novamente e tente mais uma vez.

Veja também, quando eu removi o comentário do seu arquivo, eu removi a outra instrução também, que foi substituída pela nova.

Está muito estranho no meu pc, agora o erro sumiu, mas não pega o estilo do Bootstrap, nem cria a tag style.

Removi a pasta node_modules e executei novamente o npm i, mas nada. Vou seguir com o curso, obrigado Flavio.

Abraço.

A tag style vc tem que colocar manual. Só depois que você muda o projeto para ele adicionar automático. Já chegou nessa parte?

Hmmm, acho que comi bola então. Amanhã vou rever novamente as vídeo aulas.

Obrigado pela atenção.