单独文件vue.js中的样式

Question

我必须将vue.js和webpack添加到我的项目中。有必要使用样式创建一个单独的文件并将其添加到html。有两个插件可以执行此操作：MiniCssExtractPlugin和ExtractTextPlugin。

1）带MiniCssExtractPlugin的选项。单独创建文件没有问题。创建的文件将添加到html文件。但是Vue组件中的样式不适用，就像它们根本不存在一样。

webpack.congig.js

     const MiniCssExtractPlugin = require('mini-css-extract-plugin');
        module: {
                rules: [
                   {
 {
                   test: /\.vue$/,
                   loader: 'vue-loader',
                   options: {
                     loader:{
                       scss: 'vue-style-loader!css-loader!sass-loader'
                     }
                   }
                  },
                      test: /\.scss$/,
                      use:[
                          'style-loader',
                          MiniCssExtractPlugin.loader,
                          {
                              loader: 'css-loader',
                              options: { sourceMap: true }
                          },
                          {
                              loader: 'postcss-loader',
                              options: { sourceMap: true, config: { path: PATHS.config +'/postscc.config.js' }}
                          },
                          {
                              loader: 'sass-loader',
                              options: { sourceMap: true }
                          },
                      ]
                  },
                   {
                       test: /\.css$/,
                       use:[
                           'style-loader',
                           MiniCssExtractPlugin.loader,
                           {
                               loader: 'css-loader',
                               options: { sourceMap: true }
                           },
                           {
                               loader: 'postcss-loader',
                               options: { sourceMap: true, config: { path: PATHS.config +'/postscc.config.js' }}
                           }
                       ]
                   }
               ]
            },
            plugins: [
              new MiniCssExtractPlugin (PATHS.assets + '/styles/[name].[chunkhash].css')
            ]
        };

2）webpack4支持带有ExtractTextPlugin.ExtractTextPlugin4.0.0-beta.0的选项。 Vue组件中的样式可以正常工作。但是没有创建带有样式的单独文件。头标记为空。

webpack.config.js

const ExtractTextPlugin = require("extract-text-webpack-plugin");
 module: {
        rules: [
 {
             test: /\.css$/,
             use: [
                 'vue-style-loader',
                 'css-loader'
             ]
         },
         {
             test: /\.scss$/,
             use: [
                 'vue-style-loader',
                 'css-loader',
                 'sass-loader'
             ],
         },
         {
             test: /\.sass$/,
             use: [
                 'vue-style-loader',
                 'css-loader',
                 'sass-loader?indentedSyntax'
             ],
         },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        'scss': [
                            'vue-style-loader',
                            'css-loader',
                            'sass-loader'
                        ],
                        'sass': [
                            'vue-style-loader',
                            'css-loader',
                            'sass-loader?indentedSyntax'
                        ]
                    }
                }
            }
  ]
    },
    plugins: [
      new ExtractTextPlugin (PATHS.assets + '/styles/[name].[chunkhash].css')
  ]
};

如何正确配置webpack.config.js？我需要一个带有样式的单独文件，并且想使用Vue组件。