SASS到CSS编译在Webpack中不起作用

SASS到CSS编译在Webpack中不起作用,sass,webpack,webpack-style-loader,Sass,Webpack,Webpack Style Loader,我试图将SASS编译成CSS,但没有成功。Webpack不生成css文件。也许网页包配置有问题,因为当我尝试这个项目时,它起了作用 webpack.config.js const BowerWebpackPlugin = require("bower-webpack-plugin"); const ExtractTextPlugin = require("extract-text-webpack-plugin"); const path = require("path"); const sas

我试图将SASS编译成CSS,但没有成功。Webpack不生成css文件。也许网页包配置有问题,因为当我尝试这个项目时,它起了作用

webpack.config.js

const BowerWebpackPlugin = require("bower-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require("path");

const sassLoaders = [
  "css-loader",
  "sass-loader?indentedSyntax=sass&includePaths[]=" + path.resolve(__dirname, "./src"),
];

const config = {
    entry: './src/script/index.jsx',
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, "./build"),
        publicPath: 'http://localhost:8090/assets',
    },
    devtool: 'eval-source-map',
    module: {
        loaders: [
              {   
                test: /\.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader'  
              },
              {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style-loader", sassLoaders.join("!")),
              },
        ]
    },
    plugins: [
        new BowerWebpackPlugin(),
        new ExtractTextPlugin("[name].css"),
    ],
    externals: {
        'react': 'React'
    },
    resolve: {
        extensions: ['', '.js', '.jsx', '.scss'],
        modulesDirectories: ["src", "node_modules", "bower_components"],
    }
};

module.exports = config;
package.json

{
  "scripts": {
    "start": "npm run serve | npm run dev",
    "serve": "./node_modules/.bin/http-server -p 8080",
    "dev": "webpack-dev-server --progress --colors --port 8090"
  },
  "name": "name",
  "version": "1.0.0",
  "description": "internal evidence application",
  "main": "index.js",
  "author": "author",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^5.8.22",
    "babel-loader": "^5.3.2",
    "extract-text-webpack-plugin": "^0.8.2",
    "react": "^0.13.3"
  },
  "devDependencies": {
    "babel-loader": "^5.3.2",
    "bower-webpack-plugin": "^0.1.8",
    "css-loader": "^0.16.0",
    "http-server": "^0.8.0",
    "jsx-loader": "^0.13.2",
    "node-sass": "^3.2.0",
    "path": "^0.11.14",
    "sass-loader": "^2.0.1",
    "style-loader": "^0.12.3",
    "webpack": "^1.11.0",
    "webpack-dev-server": "^1.10.1"
  }
}
项目结构

网页包开发服务器的输出

...
Hash: d8029817acd9fe21718c  
Version: webpack 1.11.0
Time: 3884ms
    Asset    Size  Chunks             Chunk Names
bundle.js  871 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 211 kB [rendered]
    [0] ./src/script/index.jsx 274 bytes {0} [built]
    [2] ./src/script/hello.jsx 456 bytes {0} [built]
    [3] jquery (bower component) 45 bytes {0} [built]
    [4] ./bower_components/jquery/dist/jquery.js 210 kB {0} [built]
     + 1 hidden modules
webpack: bundle is now VALID.

很抱歉,我没有意识到我必须将SCS包含到JavaScript文件中。

您到底是如何将SCS包含到JS文件中的?我面临着类似的问题。@cs1193与javascript文件相同谢谢我得到了它,但不幸的是我无法让css在我的上工作,它给了我一个404。你是否在.css fles的网页包配置中使用css加载器?是的。您必须同时使用css加载器和样式加载器,并且需要javascript中的css。