(Webpack) Unable to load CSS files

[JoelYourstone]

Whenever I try to require a css or scss file (with appropriate loaders) I get errors when I run "npm run watch":

[1] [piping] can't execute file: /Users/joel/code/noorWebApp/babel.server.js
[1] [piping] error given was: Error: Cannot find module '!raw!sass!../scss/Main.scss'
[1]     at Function.Module._resolveFilename (module.js:336:15)
[1]     at Function.module._load (/Users/joel/code/noorWebApp/node_modules/piping/lib/launcher.js:24:23)
[1]     at Module.require (module.js:365:17)
[1]     at require (module.js:384:17)
[1]     at Object.<anonymous> (/Users/joel/code/noorWebApp/src/views/Main.js:12:17)
[1]     at Module._compile (module.js:430:26)
[1]     at normalLoader (/Users/joel/code/noorWebApp/node_modules/babel-core/lib/api/register/node.js:199:5)
[1]     at Object.require.extensions.(anonymous function) [as .js] (/Users/joel/code/noorWebApp/node_modules/babel-core/lib/api/register/node.js:216:7)
[1]     at Module.load (module.js:355:32)
[1]     at Module._load (module.js:310:12)
[1] [piping] further repeats of this error will be suppressed...

Dependencies in package.json

"dependencies": {
    "babel": "5.8.20",
    "babel-plugin-typecheck": "1.2.0",
    "css-loader": "^0.17.0",
    "hapi": "8.8.1",
    "isomorphic-fetch": "2.1.1",
    "piping": "0.2.0",
    "raw-loader": "^0.5.1",
    "react": "0.13.3",
    "react-inline-css": "1.2.0",
    "react-router": "0.13.3",
    "react-transmit": "2.6.3",
    "sass-loader": "^2.0.1",
    "scss-loader": "0.0.1",
    "style-loader": "^0.12.3"
  },

Main.js

import __fetch from "isomorphic-fetch";
import React from "react";
import InlineCss from "react-inline-css";
import Transmit from "react-transmit";
import lang from "../languages/lang";
import Router from "react-router";

var RouteHandler = Router.RouteHandler;
var Link = Router.Link;

var mainStyle = require('!raw!sass!../scss/Main.scss');

console.log(mainStyle);

[RickWong]

Webpack require()-syntax is not supported by the piping package. The next version of the starterkit will not depend on piping anymore.

[RickWong]

Related to #41

[Traviskn]

webpack isomorphic tools may be helpful in solving this problem, as it allows you to require() css files and other assets on the server the same way you would in webpack built client side code. I also mentioned this in #41

[raphaelparent]

Any news on this? I'm having the same problem with scss file.

[1] [piping] can't execute file: /Users/rparent/Documents/CTSProjects/isomorphic-boiler-plate/babel.server.js
[1] [piping] error given was: SyntaxError: /Users/rparent/Documents/CTSProjects/isomorphic-boiler-plate/style/scss/test.scss: Unexpected token (1:0)
[1] > 1 | .container 
[1]     | ^
[1]   2 | {
[1]   3 |       background-color: red;  
[1]   4 | }

And here is my webpack file

var webpack = require("webpack");
var path = require("path");

module.exports = {
    target:  "web",
    cache:   false,
    context: __dirname,
    devtool: false,
    entry:   ["./src/config/client"],
    output:  {
        path:          path.join(__dirname, "build/dist"),
        filename:      "client.js",
        chunkFilename: "[name].[id].js",
        publicPath:    "dist/"
    },
    plugins: [
        new webpack.DefinePlugin({__CLIENT__: true, __SERVER__: false}),
        new webpack.DefinePlugin({"process.env": {NODE_ENV: '"production"'}}),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin()
    ],
    module:  {
        loaders: [
            {test: /\.json$/, loaders: ["json-loader"]},
            {test: /\.scss$/, loaders: ["style", "css", "sass"]},
            {test: /\.js$/, loaders: ["babel-loader?stage=0&optional=runtime&plugins=typecheck"], exclude: /node_modules/}
        ]
    },
    resolve: {
        modulesDirectories: [
            "src",
            "node_modules",
            "web_modules",
            "style"
        ],
        extensions: ["", ".json", ".js", ".scss"]
    },
    node:    {
        __dirname: true,
        fs:  "empty",
        net: "empty",
        tls: "empty"
    }
};

[kadishmal]

I am having exactly the same problem. Haven't found any solution so far.

[raphaelparent]

I managed to use webpack-isomorphic-tools and pipe my scss files into my components. That was like 2 months ago so it might not be relevant anymore.

[kadishmal]

Right, I did that yesterday night and it looks like webpack-isomorphic-tools is the only solution.

[RickWong]

It took a while but the server-side now uses Webpack too. That means many webpack loaders should work on the server as well including url-loader and css-loader. (Piping is also gone, the server gets instant code updates from Webpack HMR!)

So please try release ^5.0.0.