Sass与webpack无法正常工作

Question

I'm building an app using webpack, react, babel, and Sass. I've been trying to get Sass working, but it's not playing ball. It's not throwing any errors, it just doesn't seem to be compiling properly, and when I examine the element in Dev Tools, it simply says "invalid property value" where I've referenced a variable. Is there something glaringly obvious I'm doing wrong?

My app.scss:

@import '../../../node_modules/normalize.css/normalize.css';
@import '../variables.scss';

/*
 * Base styles
 * ========================================================================== */

*,
*:after,
*:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

body {
    text-align: center;
    margin: 0;
}

p {
    color: $blue;
}

My variables.scss:

/*
 * Colors
 * ========================================================================== */

$blue: #334c6a;
$yellow: #f6d463;
$white: #ffffff;
$black: #000000;

/*
 * Typography
 * ========================================================================== */

$font-family-base:      'Segoe UI', 'HelveticaNeue-Light', sans-serif;

/*
 * Layout
 * ========================================================================== */

$container-margin: 55px;

Webpack.config:

var path = require("path");
var webpack = require("webpack");
var autoprefixer = require('autoprefixer');
var precss = require('precss');

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './src/index'
  ],
  output: {
    path: path.resolve(__dirname, 'build'),
    publicPath: '/build/',
    filename: "bundle.js"
  },
  resolve: {
    extensions: ['*', '.js', '.jsx', '.png', '.json']
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.LoaderOptionsPlugin({
      options: {
        context: __dirname,
        postcss: [
          autoprefixer
        ]
      }
    })
  ],
  module: {
      rules: [
     {
       test: /\.jsx?$/,
       exclude: /node_modules/,
       loaders: ['react-hot-loader', 'babel-loader']
     },
     {
       test: /\.scss$/,
       loaders: ['style-loader', 'css-loader', 'postcss-loader']
     },
     {
       test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
       loader: 'url-loader?limit=10000',
     },
     {
       test: /\.css$/,
       use: [ 'style-loader', 'css-loader' ]
     }
   ]
  }
};

Package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server"
  },
  "author": "test",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.7.7",
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.0",
    "file-loader": "^0.11.1",
    "node-sass": "^4.5.2",
    "postcss": "^5.2.17",
    "postcss-loader": "^1.3.3",
    "precss": "^1.4.0",
    "react-hot-loader": "^1.3.1",
    "style-loader": "^0.16.1",
    "webpack": "^2.3.3",
    "webpack-dev-server": "^2.4.2"
  },
  "dependencies": {
    "normalize.css": "^6.0.0",
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  }
}

Answer 1

This config is working with webpack 2 and sass.

    {
      test: /\.s?css$/,
      use: ['style-loader', 'css-loader', 'sass-loader']          
    },

And then in the App.js file

import './app.scss'

The complete webpack.config

var path = require("path");
var webpack = require("webpack");
var autoprefixer = require('autoprefixer');
var precss = require('precss');

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
   './index.js'
  ],
  output: {
    path: path.resolve(__dirname, 'build'),
    publicPath: '/build',
    filename: "bundle.js"
  },

  devServer: {
    hot: true,
    contentBase: path.resolve(__dirname, 'build'),
    publicPath: '/',
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    // new webpack.NoErrorsPlugin(), not needed any more
    new webpack.LoaderOptionsPlugin({
      options: {
        context: __dirname,
        postcss: [
          autoprefixer
        ]
      }
    })
  ],
  module: {
    rules: [{
        test: /\.js?$/,
        exclude: /node_modules/,
        loaders: ['babel-loader']
      },
      {
        test: /\.s?css$/,
        use: ['style-loader', 'css-loader', 'sass-loader' , 'postcss-loader']
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
        loader: 'url-loader?limit=10000',
      }
    ]
  }
};