webpackが動作しないSassは

Question

webpack、react、babel、およびSassを使用してアプリケーションを構築しています。私はサスを働かせようとしてきたが、ボールを弾いていない。それはエラーを投げていない、それはちょうど正しくコンパイルされていないようだ、私はDev Toolsの要素を調べるとき、単に変数を参照した "無効なプロパティ値"と言う。私が間違っていることが明らかに明白なものはありますか？

マイ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; 
} 

マイ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

この設定はwebpack 2とsassで動作します。

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

そしてApp.jsに

import './app.scss' 

完全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', 
     } 
    ] 
    } 
};