Sass with webpack does not working

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