使用ExtractTextPlugin将sass作为webpack中的文件包含在内

时间:2016-02-29 07:56:32

标签: css sass webpack

设置加载器有以下模块:

/**
 * @module Default loaders.
 */
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = function (config, options, state) {

  /**
   * Loaders
   * Reference: http://webpack.github.io/docs/configuration.html#module-loaders
   * List: http://webpack.github.io/docs/list-of-loaders.html
   * This handles most of the magic responsible for converting modules
   */
  config.module.loaders = config.module.loaders.concat([{
    // JS LOADER
    // Reference: https://github.com/babel/babel-loader
    // Transpile .js files using babel-loader
    // Compiles ES6 and ES7 into ES5 code
    test: /\.js$/,
    loaders: ['babel?optional[]=runtime'],
    exclude: function (absPath) {
      return absPath.match(/node_modules/) && !absPath.match(/angular\-ff/);
    }
  }, {
    // Images loader
    // Reference: https://github.com/webpack/url-loader
    // Copy png, jpg, jpeg, gif, svg files to images dir
    // Rename the file using the asset hash
    // Pass along the updated reference to your code
    test: /\.(png|jpg|jpeg|gif|svg)$/,
    loader: 'url?limit=5000&name=images/[name]-[hash].[ext]'
  }, {
    // Icon loader
    // Reference: https://github.com/webpack/file-loader
    // Copy icon files to images dir
    test: /\.(ico|icon)$/,
    loader: 'file?name=images/[name].[ext]'
  }, {
    // woff, woff2, ttf, eot files to output
    // Fonts loader
    // Reference: https://github.com/webpack/file-loader
    // Copy woff, woff2, ttf, eot files to fonts dir
    // Rename the file using the asset hash
    // Pass along the updated reference to your code
    test: /\.(woff|woff2|ttf|eot)$/,
    loader: 'file?name=fonts/[name]-[hash].[ext]'
  }, {
    // HTML LOADER
    // Reference: https://github.com/webpack/raw-loader
    // Allow loading html through js
    test: /\.html$/,
    loader: 'html-loader'
  }, {
    test: /\.jade/,
    loader: 'jade-loader'
  }, {
    test: /\.sass$/,
    // Passing indentedSyntax query param to node-sass
    //loaders: ["style", "css", "postcss", "resolve-url", "sass?sourceMap&indentedSyntax"]
    loader: ExtractTextPlugin.extract("css!postcss!resolve-url!sass?sourceMap&indentedSyntax")
  }]);


};

此外,还有一个用于设置插件的模块:

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

/**
 * @module Default webpack plugins.
 */
module.exports = function (config, options, state) {

  // Add build specific plugins
  if (options.build) {
    config.plugins.push(
      // Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin
      // Only emit files when there are no errors
      new webpack.NoErrorsPlugin(),

      // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
      // Dedupe modules in the output
      new webpack.optimize.DedupePlugin(),

      // Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
      // Minify all javascript, switch loaders to minimizing mode
      new webpack.optimize.UglifyJsPlugin()
    )
  }

  config.plugins.push(new ExtractTextPlugin("app.css", { allChunks: true }));
};

但ExtractTextPlugin不起作用 - 我的所有sass文件都被转换为css文件,并添加到索引页面,其中包含' style'标签。我做错了什么?提前致谢!

0 个答案:

没有答案