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

Question

我在捆绑我的应用程序时遇到这些错误，并且我不明白为什么它不起作用。我之前使用过 style-loader，现在我尝试实现 extract-text 插件，但遇到了这些错误:

问题是所有这一切实际上都是与 style-loader 一起使用的，我只是用 extract 插件替换了 style-loader，没有更改任何其他加载器或插件，我搜索了但没有找到任何解决方案。

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')

],

Answer 1

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

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