Develop Reference

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. mocha enzyme + webpack

I am setting up mocha + chai + enzyme to test my react components.
I have set up the webpack.config.js file as below
webpack.config.js
const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");
module.exports = {
node: {
fs: 'empty'
},
entry: "./App.js",
output: {
path: path.join(
__dirname, '/prod'
),
filename: "app.bundle.js",
},
module: {
rules: [
{
test: /\.js$|jsx/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
},
{ test: /\.js$|jsx/, use: 'mocha-loader' },
],
options: {
presets: ["es2015"]
},
},
resolve: {
extensions: ['*', '.js', '.jsx'],
},
plugins: [
new HtmlPlugin({
template: './public/index.html'
})
]
}
webpack.config.test.js
const webPackExternals = require('webpack-node-externals')
module.exports = {
mode:'development',
target: 'node',
externals: [webPackExternals()],
module: {
rules: [
{
test: /\*.test\.js$/,
use: ['mocha-loader'],
exclude: /node_modules/,
},
{ test: /\.css$/, use: 'css-loader' },
]
},
}
package.json
{
"name": "tobacco-free",
"version": "1.0.0",
"description": "",
"main": "App.js",
"scripts": {
"build": "webpack --mode production",
"dev": "webpack-dev-server --mode development --open --hot",
"start": "serve ./prod",
"test": "mocha-webpack --webpack-config webpack.config.test.js \"./src/**/*.test.js\"",
"coverage": "nyc --reporter=lcov --reporter=text npm run test"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"istanbul-instrumenter-loader": "^3.0.1",
"mapbox-gl": "^1.8.1",
"nyc": "^15.0.0",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"serve": "^11.3.0",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "7",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"chai": "^4.2.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"html-webpack-plugin": "^3.2.0",
"mocha": "^7.1.1",
"mocha-loader": "^4.0.2",
"mocha-webpack": "2.0.0-beta.0",
"webpack-dev-server": "^3.10.3",
"webpack-node-externals": "^1.7.2"
}
}
When I run yarn test, I get this error
https://github.com/amkayondo/imgBank/blob/master/Annotation%202020-03-21%20173230.jpg
You may need an appropriate loader to hand
le this file type, currently no loaders are
configured to process this file.
But I don't know the loader it needs because I added the use: ['mocha-loader'] In thewebpack.config.js. Please help me with this bug

I replaced the mocha-loader with babel-loader to enable mocha to understand the .jsx files
I also replace the test: /\*.test.js$\/ with test: /\.js$|jsx/ to enable mocha to get access to the test and its component
I also add the resolve key to resolve: { extensions: ['*', '.js', '.jsx'],} in the webpack.config.test.js file to enable mocha to read js and jsx files
modified webpack.config.test.js
const webPackExternals = require('webpack-node-externals')
module.exports = {
mode:'development',
target: 'node',
externals: [webPackExternals()],
module: {
rules: [
{
test: /\.js$|jsx/,
use: 'babel-loader',
exclude: /node_modules/,
},
{ test: /\.css$/, use: 'css-loader' },
]
},
resolve: {
extensions: ['*', '.js', '.jsx'],
},
}

babel-loader reactjs Unexprected Token when code is outside project root

I am building a number of web apps using reactjs, webpack, babel and yarn. I want to share some of my js(x) code between projects. Therefore I have have put it in a separate folder that i want to refer to from my projects (by using an alias in webpack.config.js).
It seems like babel-loader doesn't understand the reactjs syntax in the code I have in folder outside of my project root.
There is probably something wrong with my config somewhere, but I can't seem to find it. Is there anyone else that can?
Here is my webpack.config.js:
const webpack = require('webpack');
const path = require('path');
module.exports = env => {
return {
devtool: 'eval',
mode: 'development',
entry: ['index.jsx'],
output: {
filename: 'app.js',
publicPath: 'dist',
path: path.resolve('dist'),
},
// configure the dev server to run
devServer: {
port: 3001,
historyApiFallback: {
disableDotRule: true
},
inline: true,
},
resolve: {
extensions: ['.jsx', '.js'],
modules: ['src', 'node_modules'],
alias: {
$fff: path.resolve('/code/fff/src/')
}
},
module: {
rules: [
{
test: /\.jsx?$/,
include: [
path.resolve(__dirname),
path.resolve('/code/fff/src/')
],
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
mimtype: "text/css",
includePaths: []
}
}]
},
{
test: /\.css$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
mimtype: "text/css",
includePaths: []
}
}]
},
{
test: /\.(svg|png|ico|xml|json)$/,
loaders: ['file-loader'],
include: path.resolve('assets')
},
],
},
plugins: [
new webpack.DefinePlugin({
__API_URL: JSON.stringify(env.development ? 'https://localhost:44341/api/' : 'xxx/api/'),
__APPLICATION_KEY: JSON.stringify('CrossCheck')
})
]
};
};
.babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
package.json
{
"name": "CrossCheckFront",
"version": "1.0.0",
"main": "index.js",
"author": "4E2",
"license": "MIT",
"devDependencies": {
"#babel/core": "^7.8.4",
"#babel/preset-env": "^7.8.4",
"#babel/preset-react": "^7.8.3",
"babel-loader": "^8.0.6",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
},
"dependencies": {
"bootstrap": "^4.4.1",
"cross-fetch": "^3.0.4",
"css-loader": "^3.4.2",
"eslint": "^6.8.0",
"file-loader": "^5.1.0",
"node-sass": "^4.13.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.2.0",
"react-redux-oauth2": "^0.5.14",
"react-router-dom": "^5.1.2",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.3"
},
"scripts": {
"start": "webpack-dev-server --env.development",
"build": "webpack --env.production"
}
}
and here is part of the error output:
ERROR in C:/code/fff/src/InitResetPasswordPage/InitResetPasswordPage.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\code\fff\src\InitResetPasswordPage\InitResetPasswordPage.jsx: Unexpected token (47:12)
45 | return (
46 |
> 47 | <div className="h-100 row align-items-center">
| ^
48 | <div className="col lg-4"></div>
49 | <div className="col lg-4 fet-loginform">
50 | <h2 className="fet-header">Lösenordsåterställning</h2>
at Parser.raise (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:7044:17)
at Parser.unexpected (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:8422:16)
at Parser.parseExprAtom (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:9701:20)
at Parser.parseExprSubscripts (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:9287:23)
at Parser.parseMaybeUnary (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:9267:21)
at Parser.parseExprOps (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:9137:23)
at Parser.parseMaybeConditional (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:9110:23)
at Parser.parseMaybeAssign (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:9065:21)
at Parser.parseParenAndDistinguishExpression (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:9842:28)
at Parser.parseExprAtom (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:9622:21)
at Parser.parseExprSubscripts (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:9287:23)
at Parser.parseMaybeUnary (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:9267:21)
at Parser.parseExprOps (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:9137:23)
at Parser.parseMaybeConditional (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:9110:23)
at Parser.parseMaybeAssign (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:9065:21)
at Parser.parseExpression (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:9017:23)
at Parser.parseReturnStatement (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:11091:28)
at Parser.parseStatementContent (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:10772:21)
at Parser.parseStatement (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:10724:17)
at Parser.parseBlockOrModuleBlockBody (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:11298:25)
at Parser.parseBlockBody (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:11285:10)
at Parser.parseBlock (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:11269:10)
at Parser.parseFunctionBody (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:10285:24)
at Parser.parseFunctionBodyAndFinish (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:10254:10)
at Parser.parseMethod (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:10216:10)
at Parser.pushClassMethod (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:11704:30)
at Parser.parseClassMemberWithIsStatic (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:11621:12)
at Parser.parseClassMember (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:11563:10)
at C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:11518:14
at Parser.withTopicForbiddingContext (C:\code\CrossCheck\CrossCheckFront\node_modules\#babel\parser\lib\index.js:10599:14)
# C:/code/fff/src/InitResetPasswordPage/index.js 1:0-40 1:0-40
# ./src/App/App.jsx
# ./src/App/index.js
# ./src/index.jsx
# multi index.jsx

Javascript es6 class is not defined

After building my project it gives me this error but in the console of chrome it gives me the following error. Could someone help me? I have no idea what causes this. It feels like im using export and class in a wrong way.
Node version: v11.6.0
Npm version: 4.6.1
webpack.config.js
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');
module.exports = {
entry:
{
widget: ['./src/js/widget/v1/widget.js', './src/sass/widget/widget.scss'],
website: ['./src/sass/website/website.scss', './src/js/website/website.js']
},
output: {
path: path.resolve(__dirname, 'static'),
filename: '[name]/[name].js',
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
enforce: 'pre',
},
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015'],
},
},
{
test: /\.(css|scss)$/,
loaders: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader?minimize!sass-loader'],
}),
},
{
test: /\.(scss)$/,
loader: "sass-loader", // compiles Sass to CSS
options: {
data: "$HOST-URL: '" + "localhost:8000" + "';"
}
},
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml' },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=application/font-woff' },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=application/font-woff' },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=application/octet-stream' },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
],
},
stats: {
colors: true,
},
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
HOST_URL: "localhost:8000"
}),
new CopyWebpackPlugin([
{ from: './node_modules/font-awesome/fonts/', to: './assets/fonts/' },
{ from: './src/widget/', to: './widget/' },
{ from: './src/website/', to: './website/' },
]),
new StyleLintPlugin(),
new ExtractTextPlugin({
filename: '[name]/css/[name].css',
allChunks: true,
}),
new UglifyJSPlugin(),
],
};
package.json
{
"name": "name",
"version": "0.0.1",
"main": "index.js",
"author": "author",
"license": "MIT",
"devDependencies": {
"autoprefixer": "^6.7.7",
"babel-core": "^6.26.3",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.4.0",
"babel-preset-es2015": "^6.22.0",
"css-loader": "^0.26.4",
"eslint": "^3.17.1",
"eslint-config-airbnb": "^14.1.0",
"eslint-loader": "^1.6.3",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.0",
"file-loader": "^0.10.1",
"http-server": "^0.11.1",
"node-sass": "^4.9.2",
"postcss-loader": "^1.3.3",
"sass-loader": "^6.0.3",
"style-loader": "^0.13.2",
"stylelint-config-standard": "^16.0.0",
"stylelint-webpack-plugin": "^0.7.0",
"uglifyjs-webpack-plugin": "^0.3.0",
"webpack": "^2.7.0",
"webpack-shell-plugin": "^0.5.0"
},
"scripts": {
"babel": "babel --presets es2015 js/main.js -o build/main.bundle.js",
"webpack": "webpack",
"watch": "webpack --watch"
},
"dependencies": {
"bootstrap": "^4.0.0",
"bootstrap-datepicker": "^1.6.4",
"bootstrap-sass": "^3.3.7",
"copy-webpack-plugin": "^4.5.2",
"extract-text-webpack-plugin": "^2.1.0",
"font-awesome": "^4.7.0",
"formdata-polyfill": "^3.0.9",
"jquery": "^3.2.1",
"popper.js": "^1.12.9"
}
}
widget.js
import Video from './video';
import Overlay from './overlay';
class Widget {
...
}
export {Widget as default}
window.Widget = Widget;
Video and Overlay are also classes and exported the same way as the Widget class. Before this, it was declares as
export default class Widget{}
The code where I am trying to access Widget is in the index.html, where I create a new Widget inside the script tag.
index.html
<script type="text/javascript">
var widget = new Widget({
});
widget.render();
</script>

ERROR in ./node_modules/bootstrap-loader/no-op.js

I'm using Webpack in my application, in which I create my entry point as
index.ts and I'm trying to run it using sass css bootstrap typescript as resources in my project webpack, but I am stuck with these errors,(bootstrap-loader) :
ERROR in ./node_modules/bootstrap-loader/no-op.js
(./node_modules/bootstrap-loader/lib/bootstrap.scripts.loader.js?{"bootstrapVersion":3,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style-loader","css-loader","sass-loader"],"styles":["mixins","normalize","print","glyphicons","s
caffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","responsive-embed","close","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts":["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath":"/projects/bootstrapwebpack/node_modules/bootstrap-loader/.bootstraprc-3-default","bootstrapPath":"/projects/bootstrapwebpack/node_modules/bootstrap-sass","bootstrapRelPath":"../bootstrap-sass"}!./node_modules/bootstrap-loader/no-op.js)
...
In my config.js I have :
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: [ 'bootstrap-loader', './src/index.ts',],
module: {
rules:[
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
],
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
},
},
],
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
exclude: /node_modules/
},
// Boooootstrap
{
test: /bootstrap-sass\/assets\/javascripts\//,
loader: 'imports-loader?jQuery=jquery'
},
{
test: /\.(woff2?|svg)$/, loader: 'url-loader?limit=10000'
},
{
test: /\.(ttf|eot)$/, loader: 'file-loader'
},
],
},
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
Currently I'm trying to use in my package.json these following lines :
{
"name": "test",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "webpack --mode development --watch ",
"build": "webpack --progress -p --watch "
},
"dependencies": {
"autoprefixer": "^9.0.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"bootstrap": "^4.1.2",
"bootstrap-loader": "^3.0.0",
"bootstrap-sass": "^3.3.7",
"css-loader": "^1.0.0",
"exports-loader": "^0.7.0",
"file-loader": "^1.1.11",
"image-webpack-loader": "^4.3.1",
"jquery": "^3.3.1",
"mini-css-extract-plugin": "^0.4.1",
"node-sass": "^4.9.2",
"popper.js": "^1.14.3",
"postcss-loader": "^2.1.6",
"resolve-url-loader": "^2.3.0",
"sass-loader": "^7.0.3",
"style-loader": "^0.21.0",
"ts-loader": "^4.4.2",
"typescript": "^2.9.2",
"url-loader": "^1.0.1",
"webpack": "^4.16.0",
"webpack-cli": "^3.0.8"
}
}

I had the same problem yesterday.
Try adding in ./src/index.ts
require 'bootstrap/dist/css/bootstrap.min.css';
require 'bootstrap/dist/js/bootstrap.min.js';

Webpack - MiniCssExtractPlugin doesn't extract file

I've created webpack config to my VueJS project. I want to separate styles from javascript code. I've used mini-css-extract-plugin but finally I receive only bundle.js file. What's wrong with this config and where is a mistake? Is there any missing loader. My config is below:
import path from 'path';
import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import VueLoaderPlugin from 'vue-loader/lib/plugin';
import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
import CleanWebpackPlugin from 'clean-webpack-plugin';
const devMode = process.env.NODE_ENV !== 'production';
const prodPlugins = [
new UglifyJsPlugin(),
new MiniCssExtractPlugin({
filename: "css/style.css"
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: true
})
];
const basicPlugins = [
new CleanWebpackPlugin('dist'),
new VueLoaderPlugin()
];
const config = {
entry: {
bundle: './src/main.js'
},
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
{
test: /\.css$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader'
]
},
{ test: /\.(scss|sass)$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'vue-style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
js: 'babel-loader',
}
}
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
plugins: !process.env.NODE_ENV || !devMode ? basicPlugins : basicPlugins.concat(prodPlugins)
};
module.exports = config;
My file package.json
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"watch": "webpack --watch --mode development --hot",
"dev": "webpack-dev-server --mode development --progress --hot --open",
"build": "webpack --mode production --progress"
},
"author": "",
"license": "MIT",
"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-register": "^6.26.0",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"cssnano": "^3.10.0",
"eslint": "^4.19.1",
"eslint-watch": "^3.1.4",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.9.0",
"optimize-css-assets-webpack-plugin": "^4.0.1",
"sass-loader": "^7.0.1",
"sass-resources-loader": "^1.3.3",
"style-loader": "^0.21.0",
"uglifyjs-webpack-plugin": "^1.2.5",
"vue-loader": "^15.0.10",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4"
},
"dependencies": {
"axios": "^0.18.0",
"material-design-icons": "^3.0.1",
"vue": "^2.5.16",
"vue-router": "^3.0.1",
"vuetify": "^1.0.17"
}
}

Note that any imported file is subject to tree shaking. This means if you use something like css-loader in your project and import a CSS file, it needs to be added to the side effect list so it will not be unintentionally dropped in production mode.
Blockquote
in your package.json, add:
"sideEffects": [
'.scss'
]

In Webpack 4, you can add "sideEffects: true" to the loader to prevent the compiler from dropping the CSS file output by MiniCssExtractPlugin.loader (See Webpack Tree Shaking Guide). This works with Angular + TypeScript (using "module:" "ES2015" in tsconfig). I imagine it would work for your set up as well.
{
test: /\.scss$/,
include: [
helpers.root('src', 'assets')
],
sideEffects: true,
use: [
MiniCssExtractPlugin.loader,
{loader: 'css-loader'},
{loader: 'resolve-url-loader'}, // Angular only
{loader: 'sass-loader'},
]
},

Check that you have set the NODE_ENV environment variable.
In your config the extracting of css to separate files (MiniCssExtractPlugin) will only occur when building for production, in other words, when NODE_ENV is set to 'production'. When building for development style-loader is being used which will inject the css within a tag.