SASS-Loader Unable to properly parse SCSS files - css

Question

I am trying to update an older NPM/Node codebase to get things to compile properly when I run npm run build and I am having problems with it spitting out a ton of scss related issues.
Error message: You may need an additional loader to handle the result of these loaders
Full Error Message:
ERROR in ./src/containers/App/styles/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected character '#' (5:0)
File was processed with these loaders:
* ./node_modules/sass-loader/lib/loader.js
You may need an additional loader to handle the result of these loaders.
| Fonts
| */
> #font-face {
| font-family: 'Roboto';
| src: url(//fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap&subset=cyrillic-ex) format("truetype"); }
at handleParseError (/var/www/FlaskApp/people-app/static/node_modules/webpack/lib/NormalModule.js:450:19)
at doBuild.err (/var/www/FlaskApp/people-app/static/node_modules/webpack/lib/NormalModule.js:484:5)
at runLoaders (/var/www/FlaskApp/people-app/static/node_modules/webpack/lib/NormalModule.js:343:12)
at /var/www/FlaskApp/people-app/static/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/var/www/FlaskApp/people-app/static/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/var/www/FlaskApp/people-app/static/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
at /var/www/FlaskApp/people-app/static/node_modules/loader-runner/lib/LoaderRunner.js:236:3
at context.callback (/var/www/FlaskApp/people-app/static/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.render [as callback] (/var/www/FlaskApp/people-app/static/node_modules/sass-loader/lib/loader.js:76:9)
at Object.done [as callback] (/var/www/FlaskApp/people-app/static/node_modules/neo-async/async.js:8067:18)
at options.success (/var/www/FlaskApp/people-app/static/node_modules/node-sass/lib/index.js:308:32)
# ./src/containers/App/index.js 40:0-28
# ./src/index.js
# multi bootstrap-loader ./src/index ./src
app.scss:
/* global styles */
#import 'fonts/roboto';
#import 'typography';
#import 'links';
:global(body) {
position: relative;
font-family: 'Roboto', sans-serif !important;
h1, h2, h3, h4 {
font-weight: 300;
}
}
:global(.addIconDiv) {
position: relative;
display: inline-block;
}
:global(.addIconSpinner) {
position: absolute;
top: -6px;
left: -6px;
}
:global(.editIconSpinner) {
position: absolute;
top: 50%;
left: 45%;
margin-top: -12px;
margin-left: -12px;
}
roboto.scss:
#font-face {
font-family: 'Roboto';
src: url(//fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap&subset=cyrillic-ex) format('truetype')
}
webpack dev.config.js:
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const autoprefixer = require('autoprefixer');
const postcssImport = require('postcss-import');
module.exports = {
mode: 'development',
devtool: 'cheap-module-eval-source-map',
entry: [
'bootstrap-loader',
'webpack-hot-middleware/client',
'./src/index',
],
output: {
publicPath: '/dist/',
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
publicPath: '../',
hmr: process.env.NODE_ENV === 'development',
},
},
'sass-loader',
],
},
],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"',
},
__DEVELOPMENT__: true,
}),
new MiniCssExtractPlugin({
filename: 'bundle.css',
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(), //no pings back to webpack "_hrm"
new webpack.NoEmitOnErrorsPlugin(),
new webpack.ProvidePlugin({
jQuery: 'jquery',
}),
],
};
npm-debug.log
0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'build' ]
2 info using npm#3.5.2
3 info using node#v8.10.0
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle redux-easy-boilerplate#1.3.3~prebuild: redux-easy-boilerplate#1.3.3
6 silly lifecycle redux-easy-boilerplate#1.3.3~prebuild: no script for prebuild, continuing
7 info lifecycle redux-easy-boilerplate#1.3.3~build: redux-easy-boilerplate#1.3.3
8 verbose lifecycle redux-easy-boilerplate#1.3.3~build: unsafe-perm in lifecycle true
9 verbose lifecycle redux-easy-boilerplate#1.3.3~build: PATH: /usr/share/npm/bin/node-gyp-bin:/var/www/FlaskApp/people-app/static/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/snap/bin
10 verbose lifecycle redux-easy-boilerplate#1.3.3~build: CWD: /var/www/FlaskApp/people-app/static
11 silly lifecycle redux-easy-boilerplate#1.3.3~build: Args: [ '-c',
11 silly lifecycle 'webpack --progress --verbose --colors --display-error-details --config webpack/common.config.js' ]
12 silly lifecycle redux-easy-boilerplate#1.3.3~build: Returned: code: 2 signal: null
13 info lifecycle redux-easy-boilerplate#1.3.3~build: Failed to exec build script
14 verbose stack Error: redux-easy-boilerplate#1.3.3 build: `webpack --progress --verbose --colors --display-error-details --config webpack/common.config.js`
14 verbose stack Exit status 2
14 verbose stack at EventEmitter.<anonymous> (/usr/share/npm/lib/utils/lifecycle.js:232:16)
14 verbose stack at emitTwo (events.js:126:13)
14 verbose stack at EventEmitter.emit (events.js:214:7)
14 verbose stack at ChildProcess.<anonymous> (/usr/share/npm/lib/utils/spawn.js:24:14)
14 verbose stack at emitTwo (events.js:126:13)
14 verbose stack at ChildProcess.emit (events.js:214:7)
14 verbose stack at maybeClose (internal/child_process.js:925:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
15 verbose pkgid redux-easy-boilerplate#1.3.3
16 verbose cwd /var/www/FlaskApp/people-app/static
17 error Linux 4.15.0-51-generic
18 error argv "/usr/bin/node" "/usr/bin/npm" "run" "build"
19 error node v8.10.0
20 error npm v3.5.2
21 error code ELIFECYCLE
22 error redux-easy-boilerplate#1.3.3 build: `webpack --progress --verbose --colors --display-error-details --config webpack/common.config.js`
22 error Exit status 2
23 error Failed at the redux-easy-boilerplate#1.3.3 build script 'webpack --progress --verbose --colors --display-error-details --config webpack/common.config.js'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the redux-easy-boilerplate package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error webpack --progress --verbose --colors --display-error-details --config webpack/common.config.js
23 error You can get information on how to open an issue for this project with:
23 error npm bugs redux-easy-boilerplate
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls redux-easy-boilerplate
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]