Webpack-编译sass后，生成的css与scss文件相同

我正在努力解决一个与使用webpack将sass编译为css相关的问题。 通过webpack编译scss文件后，生成的css与scss文件相同，其中scss文件是入口点之一。这意味着sass加载程序无法运行，但没有关于它的错误消息。我不确定我的设置出了什么问题。我试过Windows7和Ubuntu15，但问题仍然存在

main.js

import 'scss/main.scss';

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  devtool: 'eval',
  resolve: {
    root: path.resolve(__dirname),
    alias: {
      js: 'src/javascript',
      scss: 'src/stylesheet',
  },
  extensions: ['', '.js', '.jsx']
  },
  entry: [
    './src/javascript/main.js'
  ],
  output: {
    path: path.join(__dirname, 'dist', 'static'),
    filename: 'bundle.js',
    chunkFilename: "[chunkhash].js",
    publicPath: '/static/'
  },
  plugins: [
    new ExtractTextPlugin("bundle.css")
  ],
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loaders: ['babel'],
      include: [ path.join(__dirname, 'src', 'javascript') ]
    },
    {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract('style-loader', 'raw-loader', 'sass-loader'),
      include: [ path.join(__dirname, 'src', 'stylesheet') ]
    }]
  }
};

main.scss:

$color : red;
body {
  background-color: $color;
}

$color : red;
body {
  background-color: $color;
}

Version: webpack 1.12.14
Time: 8406ms
     Asset       Size  Chunks             Chunk Names
 bundle.js  970 bytes       0  [emitted]  main
bundle.css   22 bytes       0  [emitted]  main
chunk    {0} bundle.js, bundle.css (main) 110 bytes [rendered]
    [0] multi main 28 bytes {0} [built]
    [1] ./src/javascript/main.js 41 bytes {0} [built]
    [2] ./src/stylesheet/main.scss 41 bytes {0} [built]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 43 bytes [rendered]
        [0] ./~/raw-loader!./src/stylesheet/main.scss 43 bytes {0} [built]

bundle.css（编译后的css）：

$color : red;
body {
  background-color: $color;
}

$color : red;
body {
  background-color: $color;
}

Version: webpack 1.12.14
Time: 8406ms
     Asset       Size  Chunks             Chunk Names
 bundle.js  970 bytes       0  [emitted]  main
bundle.css   22 bytes       0  [emitted]  main
chunk    {0} bundle.js, bundle.css (main) 110 bytes [rendered]
    [0] multi main 28 bytes {0} [built]
    [1] ./src/javascript/main.js 41 bytes {0} [built]
    [2] ./src/stylesheet/main.scss 41 bytes {0} [built]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 43 bytes [rendered]
        [0] ./~/raw-loader!./src/stylesheet/main.scss 43 bytes {0} [built]

webpack.config.js

import 'scss/main.scss';

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  devtool: 'eval',
  resolve: {
    root: path.resolve(__dirname),
    alias: {
      js: 'src/javascript',
      scss: 'src/stylesheet',
  },
  extensions: ['', '.js', '.jsx']
  },
  entry: [
    './src/javascript/main.js'
  ],
  output: {
    path: path.join(__dirname, 'dist', 'static'),
    filename: 'bundle.js',
    chunkFilename: "[chunkhash].js",
    publicPath: '/static/'
  },
  plugins: [
    new ExtractTextPlugin("bundle.css")
  ],
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loaders: ['babel'],
      include: [ path.join(__dirname, 'src', 'javascript') ]
    },
    {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract('style-loader', 'raw-loader', 'sass-loader'),
      include: [ path.join(__dirname, 'src', 'stylesheet') ]
    }]
  }
};

命令消息：

$color : red;
body {
  background-color: $color;
}

$color : red;
body {
  background-color: $color;
}

Version: webpack 1.12.14
Time: 8406ms
     Asset       Size  Chunks             Chunk Names
 bundle.js  970 bytes       0  [emitted]  main
bundle.css   22 bytes       0  [emitted]  main
chunk    {0} bundle.js, bundle.css (main) 110 bytes [rendered]
    [0] multi main 28 bytes {0} [built]
    [1] ./src/javascript/main.js 41 bytes {0} [built]
    [2] ./src/stylesheet/main.scss 41 bytes {0} [built]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 43 bytes [rendered]
        [0] ./~/raw-loader!./src/stylesheet/main.scss 43 bytes {0} [built]

---

检查您的

ExtractTextPlugin.extract

语句。我想你需要

ExtractTextPlugin.extract('style', 'raw!sass')

---

在当前声明中，它通过原始加载程序进行处理，并跳过sass加载程序。因此输出。

检查您的

ExtractTextPlugin.extract

语句。我想你需要

ExtractTextPlugin.extract('style', 'raw!sass')

---

在当前声明中，它通过原始加载程序进行处理，并跳过sass加载程序。因此输出。

是的，你是对的。问题解决了！！但我真的不明白其中的区别。我以为

是生的！sass'

只是

'raw'，sass'

的语法糖。这两种说法的区别是什么？这与插件设计有关。不幸的是，它与网页的其余部分不一致。是的，你是对的。问题解决了！！但我真的不明白其中的区别。我以为

是生的！sass'

只是

'raw'，sass'

的语法糖。这两种说法的区别是什么？这与插件设计有关。不幸的是，它与Web包的其余部分不一致。