使用webpack 2将.scss文件提取到.css中

debugcn 发表于 Dev

罗曼（Rohman HM）

我需要到transpile.scss文件到.css文件中指定的文件夹。我曾经extract-text-webpack-plugin提取文件，但是没有用。

这是我的 webpack.config.js

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

var env = process.env.NODE_ENV
var config = {
  entry: path.join(__dirname, 'src/index.js'),
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
      {
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['react', ['es2015', { modules: false }], 'stage-0']
          }
        },
        resource: {
          exclude: /(node_modules|bower_components)/,
          test: /.jsx?$/
        }
      }, {
        use: {
          loader: ExtractTextPlugin.extract({
            fallbackLoader: "style-loader",
            loader: "css-loader!sass-loader",
          })
        },
        resource: {
          test: /.scss?$/
        }
      }
    ]
  }
}

switch (env) {
  case 'production':
    Object.assign(config, {
      output: {
        path: path.join(__dirname, 'build'),
        publicPath: 'build',
        filename: 'bundle.min.js'
      },
      devtool: false,
      plugins: [
        new webpack.DefinePlugin({
          'process.env.NODE_ENV': JSON.stringify('production'),
          '__DEVTOOLS__': false
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false,
            screw_ie8: true
          },
          mangle: false,
          comments: false
        })
      ]
    })
    break

  case 'development':

  default:
    Object.assign(config, {
      output: {
        path: path.join(__dirname, 'build'),
        publicPath: 'build',
        filename: 'bundle.js',
        chunkFilename: '[name].js'
      },
      devtool: 'inline-sourcemap',
      plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new ExtractTextPlugin('tahu.css')
      ],
      devServer: {
          contentBase: __dirname + '/'
      }
    })
    break
}

module.exports = Object.assign({}, config);

这是我的依赖

"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "2.0.0-beta.5",
"node-sass": "^4.3.0",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",
"webpack": "2.2.0-rc.7",

有人可以帮助我吗？

罗曼（Rohman HM）

最后，我知道为什么没有构建.css文件。因为我忘记了要求将.scss文件放入我的.js文件中。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。