Webpack提取文本插件未知单词导出错误

时间:2017-07-08 12:58:34

标签: javascript webpack bundling-and-minification extract-text-plugin

捆绑我的应用程序时遇到这些错误,我无法理解为什么它不起作用。我之前使用的是样式加载器,现在我正在尝试实现extract-text插件但是出现了这些错误:

enter image description here

所有这一切实际上都是使用样式加载器,我只是用抽取插件替换样式加载器,而不是更改任何其他加载器或插件,我搜索但没有找到任何解决方案。

vuetify.css可以在https://github.com/vuetifyjs/vuetify/tree/master/dist

找到

这是我的index.scss:

@import "default";
@import "list";
@import "page";
@import "toolbar";

这是我导入文件的部分:

import 'vuetify/dist/vuetify.min.css';
import './sass/index.scss';

Webpack模块配置:

module: {
    rules: [{
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: {
                    scss: 'css-loader?url=false!sass-loader',
                },
                extractCSS: true,
            }
        },
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        },
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
                use: 'css-loader',
                fallback: 'style-loader!css-loader'
            })
        },
        {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract({
                use: 'css-loader?url=false!sass-loader',
                fallback: 'style-loader!css-loader?url=false!sass-loader'
            })
        },
        {
            test: /\.(png|jpg|gif|svg|ttf|otf|eot|svg|woff(2)?)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]?[hash]'
            }
        },
    ]
}

插件配置:

plugins: [

    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify(process.env.NODE_ENV),
        }
    }),

    new CleanWebpackPlugin([
        getPath('../cordova/www/**'),
    ], {
        root: getPath('..'),
    }),

    new CopyWebpackPlugin([{
            from: getPath('../index.html'),
            to: getPath('../cordova/www/index.html')
        },
        {
            from: getPath('../assets'),
            to: getPath('../cordova/www/assets/')
        },
    ]),

    new webpack.ProvidePlugin({
        fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch'
    }),

    new webpack.LoaderOptionsPlugin({
        minimize: false,
        debug: true
    }),

    new ExtractTextPlugin('styles.css')

],

1 个答案:

答案 0 :(得分:1)

/\.css$/规则更改为此规则。

  {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: 'css-loader'
    })
  }