0

When I run

webpack-dev-server --config webpack.config.json

I get the following error:

@import "modules/colors";
^
SyntaxError: Unexpected token ILLEGAL
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:513:28)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/bporter/web/worldbox_phalcon/webpack.config.js:6:1)
    at Module._compile (module.js:541:32)

So clearly webpack doesn't understand my sass/less files, and I'm not sure what I'm missing in the webpack config. I need the files that skeleton.scss imports to be output to a file public/css/style.css

skeleton.scss

/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/9/2014
* Sass Version by Seth Coelen https://github.com/whatsnewsaes
*/
@import "modules/colors";

/* Base files. */
@import "base/normalize";
@import "base/variables";
@import "base/functions";
@import "base/base-styles";
@import "base/utils";
@import "base/typography";

/* Modules */
@import "modules/grid";
@import "modules/buttons";
@import "modules/forms";
@import "modules/lists";
@import "modules/code";
@import "modules/tables";
@import "modules/spacing";
@import "modules/media-queries";
@import "styles";

package.json

{
  "name": "worldbox_phalcon",
  "version": "1.0.0",
  "description": "This README would normally document whatever steps are necessary to get your application up and running.",
  "main": "dev.js",
  "dependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "css-loader": "^0.25.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "less-loader": "^2.2.3",
    "lodash": "^4.15.0",
    "node-sass": "^3.9.0",
    "postcss-loader": "^0.11.1",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "react-hot-loader": "^3.0.0-beta.3",
    "sass-loader": "^4.0.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.15.1",
    "write-file-webpack-plugin": "^3.1.8"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
}

webpack.config.json

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var WriteFilePlugin = require('write-file-webpack-plugin');

// THIS IS WHAT BREAKS webpack-dev-server
require('./public/scss/skeleton.scss')


module.exports = {
    devtool: 'inline-source-map',
    debug: true,
    entry: [
        'webpack-dev-server/client?http://localhost:8081/',
        'webpack/hot/only-dev-server',
        './public/js/components/App.jsx'
    ],
    contentBase: "http://worldbox.me:80/",
    output: {
        path: path.join(__dirname, '/public/js'),
        filename: 'app.js',
        // filename: '[name].js',
        publicPath: 'public/js/'
    },
    publicPath: "http://worldbox.me/",
    resolve: {
        modulesDirectories: ['node_modules', 'public/js/components', 'public/scss'],
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015']
            },
            {
                test: /\.scss$/,
                // loader: ["style", "css", "autoprefixer", "sass"]
                // loader: "style!css!autoprefixer!sass",
                // loader: ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap!autoprefixer-loader!sass-loader?sourceMap")
                loader: [ExtractTextPlugin.extract('style!css!sass'),'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]','sass?sourceMap&config=sassLoader'],
                // include: './public/scss'
            }
        ]
    },
    sassLoader: {
        includePaths: [path.resolve(__dirname, "./public/scss")]
      },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new WriteFilePlugin(),
        new ExtractTextPlugin('./public/css/style.css', { allChunks: true })
    ],
    devServer: {
        proxy: {
          '**': {
            target: "http://worldbox.me/",
            changeOrigin: true,
            secure: false
          }
        },
        outputPath: path.join(__dirname, '/public/js/'),
        hot: true,
        port: 8081,
        stats: { colors: true },
    }
};

// console.log(module.exports);

Any help would be greatly appreciated!

1 Answer 1

1

I figured it out. I needed to put

require("./public/scss/skeleton.scss")

in my App.jsx file, not in the webpack.config.json file

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.