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...