webpack

Question

我正在努力解决与使用 webpack 将 sass 编译为 css 相关的问题。通过 webpack 编译 scss 文件后，生成的 css 与 scss 文件相同，其中 scss 文件是入口点之一。这意味着 sass-loader 以某种方式无法运行，而没有关于它的错误消息。我不确定我的设置有什么问题。我已尝试使用 Window 7 和 Ubuntu 15，但问题仍然存在

main.js

import 'scss/main.scss';

main.scss:

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

bundle.css(编译css):

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

webpack.config.js

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

命令信息：

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]

Answer 1

检查您的 ExtractTextPlugin.extract 声明。我觉得你需要

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

在当前声明中，它通过 raw-loader 处理并跳过 sass-loader。因此输出。

webpack - 编译后sass，生成的css和scss文件一样

Webpack - After compiling sass, the resulting css is the same as the scss file

sass-loader