1

アプリをバンドルするときにこれらのエラーが発生し、なぜ機能しないのかわかりません。以前は style-loader を使用していましたが、今は extract-text プラグインを実装しようとしていますが、これらのエラーが発生しました:

ここに画像の説明を入力

問題は、これらすべてが実際にスタイルローダーで機能していたことです。スタイルローダーを抽出プラグインに置き換えただけで、他のローダーやプラグインは変更していません。検索しましたが、解決策が見つかりませんでした。

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

],
4

1 に答える 1

1

/\.css$/ルールをこれに変更します。

  {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: 'css-loader'
    })
  }
于 2017-07-08T20:24:03.817 に答える