Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Problema ao minificar o CSS

Quando eu uso o código ´´npm run build-dev´´, o CSS fica todo correto. Porém, quando eu uso o ´´npm run build-prod´´, o CSS fica em uma única linha, constando erro na pasta dist/style.css .

webpack.config.js:

const path = require("path");
const babiliPlugin = require("babili-webpack-plugin");
const extractTextPlugin = require('extract-text-webpack-plugin');
const optimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

let plugins = []

plugins.push(
    new extractTextPlugin("styles.css")
);
if (process.env.NODE_ENV == 'production') {

    plugins.push(new babiliPlugin());
    plugins.push(new optimizeCSSAssetsPlugin({
        cssProcessor: require('cssnano'),
        cssProcessorOptions: { 
            discardComments: {
                removeAll: true 
            }
        },
        canPrint: true
    }));    
}
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: "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:

"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-preset-es2017": "^6.24.1",
    "babili-webpack-plugin": "^0.1.1",
    "cross-env": "^5.0.1",
    "css-loader": "^0.28.4",
    "cssnano": "^3.10.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
    "optimize-css-assets-webpack-plugin": "^2.0.0",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack": "^3.1.0",
    "webpack-dev-server": "^2.5.1"
  }

E os erros que aparecem no terminal são : ´´property value expected css(css-properyvalueexpected)´´ ´´{expected css(css-lcurlyeexpected)´´ ´´identifier expected css(css-identifierexpected)´´ ´´identifier expected css(css-identifierexpected)´´

Eu revisei os códigos, e aparentemente está tudo em ordem...

2 respostas
solução!

Oi, João, tudo bem?

Eu testei os seus códigos com o projeto final do curso. O erro da pasta é sintático, em alguma linha do código css ao invés de finalizar a instrução com ; (ponto e virgula) tem uma \9 antes do;. Consertando isso, o erro da pasta sai. Para ver o erro, vá no style.css e terá um linha em vermelho (o editor de texto vai indicar).

Testa e me fala se deu certo!

Era isso mesmo!! Muito obrigado!!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software