Question

我正在尝试配置webpack2以将SCSS编译为CSS并使用

将其解压缩为一个文件

＆＃34; extract-text-webpack-plugin＆＃34;：＆＃34; ^ 2.0.0-rc.3＆＃34;

插件可以作为最新...

这是我的webpacke配置文件内容......

var path = require('path');

/**
 * Webpack Plugins
 */
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = function (env) {
  return {
        entry: './index.js',
    output: {
      path: './dist',
            filename: 'app.js'
    },

    module: {

      rules: [

        /*
         * Extract CSS files from .src/styles directory to external CSS file
         */
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: 'css-loader'
          })
        },

        /*
         * Extract and compile SCSS files from .src/styles directory to external CSS file
         */
        {
          test: /\.scss$/,
          loader: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: 'css-loader!sass-loader'
          }),
                    include: ['./app.scss']
        },

      ]

    },

    /**
     * Add additional plugins to the compiler.
     *
     * See: http://webpack.github.io/docs/configuration.html#plugins
     */
    plugins: [

      /**
       * Plugin: ExtractTextPlugin
       * Description: Extracts imported CSS files into external stylesheet
       *
       * See: https://github.com/webpack/extract-text-webpack-plugin
       */
      new ExtractTextPlugin('./dist/app.css')
        ]

  };
}

任何人都可以帮助解决这些配置的错误....

既不是编译也不是提取到文件....

Answer 1

您无需将构建（scss / css）分离为单独的查询。请参阅此处以获取文档：https://webpack.js.org/plugins/extract-text-webpack-plugin/。你应该可以这样做：

{
    test: /\.scss$/,
    use: new ExtractTextPlugin.extract([ 'css-loader', 'sass-loader' ])
}

从SCSS提取插件

1 个答案: