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文件相同

1 个答案: