Hespen Hespen - 3 years ago 201
React JSX Question

Sass-Loader & Webpack 3.6 — Unexpected token '.' on .scss parse

I'm trying to use webpack 3.6 to parse my

scss
files. Which are imported in the
.js
like
import styles from './index.scss';

However, I get the following error on build:

SyntaxError: D:/Stack/Hespen Development/Website/react-boilerplate/src/components/home/index.scss: Unexpected token (3:0)
1 | $color: green;
2 |
> 3 | .home {
| ^
4 | display: flex;
5 | flex-direction: column;
6 | align-items: center;


This currenlty is my
webpack.config


const path = require('path');
const webpack = require('webpack');

module.exports = {
entry: [
'webpack-hot-middleware/client',
path.resolve(__dirname, 'src'),
],
output: {
path: path.resolve(__dirname, 'src'),
filename: 'bundle.js',
publicPath: '/',
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
WEBPACK: true,
},
}),
],
module: {
loaders: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
query: {
presets: ['react-hmre'],
},
},
include: path.resolve(__dirname, 'src'),
},
{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
}
],
},
};


This is as described on their Github page

{
"name": "react-boilerplate",
"version": "0.0.1",
"main": "src/index.js",
"scripts": {
"lint": "eslint ./src",
"start": "cross-env NODE_ENV=development babel-node ./server.js ",
"build": "rimraf dist && webpack --config ./webpack.config.prod.js",
"serve": "cross-env NODE_ENV=production babel-node ./server.js"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-cli": "^6.10.1",
"babel-core": "^6.10.4",
"babel-eslint": "^8.0.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.5.0",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^5.0.1",
"css-loader": "^0.28.4",
"eslint": "^4.3.0",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-react": "^7.1.0",
"express": "^4.14.0",
"extract-text-webpack-plugin": "^3.0.0",
"history": "^4.7.2",
"node-sass": "^4.5.3",
"postcss-loader": "^2.0.6",
"react": "^15.2.1",
"react-dom": "^15.2.1",
"react-redux": "^5.0.5",
"react-router": "^4.2.0",
"react-router-dom": "^4.1.2",
"react-router-redux": "^5.0.0-alpha.6",
"redux": "^3.5.2",
"rimraf": "^2.5.4",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^3.6.0",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.12.2"
},
"dependencies": {
"eslint-config-airbnb": "^15.1.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2"
}
}


Why do I get this
Unexpected symbol
error?

Answer Source

This did the trick, together with what was already mentioned, using module.rules:

{
    test: /\.(css|scss)$/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [{
                loader: 'css-loader',
                options: {
                    modules: true,
                    importLoaders: 1,
                    sourceMap: true,
                },
            },
            {
                loader: 'postcss-loader',
                options: {
                    sourceMap: true,
                },
            },
            {
                loader: 'sass-loader',
                options: {
                    sourceMap: true,
                },
            },
        ],
    }),
},
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download