2

I need to transpile from .scss file to .css file in specified folder. I using extract-text-webpack-plugin to extract the file, but it didn't work.

this is my 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);

this is my dependencies

"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",

Anyone can help me?

1 Answer 1

3

Finally, I know why I don't have the build .css file. Because I forgot to require .scss file into my .js file.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.