Sass in webpack

Question

这是我第一次与Webpack，我不记得为什么我的sass文件（.scss）没有加载。我花了整个下午尝试和搜索，但我不明白我的代码中有什么问题。

webpack.config.js

module.exports = { 
    entry: "./main.js", 
    output: {path: __dirname, filename: "bundle.js"}, 
    module: { 
    loaders: [ 
     { 
     test: /.jsx?$/, 
     loader: "babel-loader", 
     exclude: /node_modules/, 
     query: { 
      presets: ["es2015", "react"] 
     } 
     }, 
     { 
     test: /\.css$/, 
     loader: "css-loader!autoprefixer-loader" 
     }, 
     { 
     test: /\.scss$/, 
     loader: "css-loader!sass-loader" 
     } 
    ] 
    } 
}; 

的package.json依赖关系：

//... 
"dependencies": { 
    "react": "^0.14.7", 
    "react-dom": "^0.14.7", 
    "react-redux": "^4.4.0", 
    "redux": "^3.3.1", 
    "webpack-dev-server": "^1.14.1" 
    }, 
    "devDependencies": { 
    "autoprefixer-loader": "^3.2.0", 
    "babel-core": "^6.6.5", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.6.0", 
    "babel-preset-react": "^6.5.0", 
    "css-loader": "^0.23.1", 
    "node-sass": "^3.4.2", 
    "redux-devtools": "^3.1.1", 
    "sass-loader": "^3.1.2", 
    "webpack": "^1.12.14" 
    } 
//... 

在我app.js我加入这一行：

import "./app/sass/app.scss"; 

终端中没有错误，Chrome控制台也没有错误。 但SASS文件未加载。

我的代码有什么问题？

谢谢！

Answer 1

您必须安装style-loader,css-loader和sass-loader以及。
要做到这一点，运行：
npm i css-loader style-loader sass-loader --save-dev

然后，添加装载机到您的WebPack配置。

// ... 
    { 
     test: /\.scss$/, 
     loader: 'style!css!sass' 
    }] 
// ... 

您们好路径，但