Webpack 如何同时使用MinicsExtractPlugin和vue样式加载程序？

我想在我的组件文件（Home.vue）和单独的文件（style.scss）中使用scss 同时,。Webpack从style.scss生成default.css-我使用MiniCssExtractPlugin和vue样式加载器

我准备了webpack.config.js，但它似乎不正确，因为当我将

更改为

时，一切都正常，否则就不行了<代码>什么都不做-没有错误，没有效果

如何将webpack.config.js同时更改为works MinicsExtractPlugin和vue样式加载程序

webpack.config.js

var path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const isDevelopment = process.env.NODE_ENV

console.log("Dev status: " + (isDevelopment == 'development' ? 'Development' : 'Production'), isDevelopment);

module.exports = {
  mode: isDevelopment,

  entry: {
    'vwp': ['./src/vue/welcome.js'],
    'default': './src/scss/style.scss'
  },
  output: {
    path: path.resolve(process.cwd(), 'public/assets/js'),
    filename: '[name].js'
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  module: {
    rules: [{
      test: /\.vue$/,
      loader: 'vue-loader'
    },
    {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: file => (
        /node_modules/.test(file) &&
        !/\.vue\.js/.test(file)
      )
    },
    {
      test: /\.css$/,
      use: [
        'vue-style-loader',
        'css-loader'
      ]
    },
    {
      test: /\.scss$/,
      use: [
        'vue-style-loader',
        MiniCssExtractPlugin.loader,
        'css-loader',
        'sass-loader',
      ]
    }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin({
      dangerouslyAllowCleanPatternsOutsideProject: true,
      cleanOnceBeforeBuildPatterns: ['../css/*', '../js/*'],
      cleanAfterEveryBuildPatterns: ['defautl.js'],
      dry: false
    }),
    new MiniCssExtractPlugin({
      filename: isDevelopment == 'development' ? '../css/[name].css' : '../css/[name].[hash].css',
      chunkFilename: isDevelopment == 'development' ? '../css/[id].css' : '../css/[id].[hash].css'
    }),
    new CleanWebpackPlugin({
      cleanAfterEveryBuildPatterns: ['defautl.js']
    }),


  ]
}

欢迎光临

import Vue from 'vue'
import Home from './Home.vue'

Vue.config.productionTip = false

new Vue({
    el: '#vwp',
    components: { Home },
    template: '<Home />'
})


Vue.config.devtools = true

从“Vue”导入Vue
从“/Home.vue”导入主页
Vue.config.productionTip=false
新Vue({
el:“#vwp”，
组件：{Home}，
模板：“”
})
Vue.config.devtools=true

Home.vue

<template>
  <div>hello text</div>
</template>

<script>
export default {
  name: "Home"
};
</script>

<style lang="scss" scoped>
* {
  color: lime;
}
</style>

你好文本
导出默认值{
姓名：“家”
};
* {
颜色：青柠；
}

问题在于，如果规则中存在正则表达式匹配项，则WebPack将拒绝工作。我认为它以某种方式标记了处理过的文件。至少在这种情况下是这样

但是WebPack是一个非常强大的工具。它可以接受一个具有两个参数（filename和entry）的函数，而不是rule参数中的正则表达式

之后，我确定vue loader将组件文件拆分为三个文件：

• .vue.js

• .vue

  最后

• .vue.css

  （或

  .scss

  ）

注意：SASS扩展取决于样式标记的lang参数

接下来，有必要用函数中的逻辑将这两种情况分开。示例中可以看到我的实现

rules: [
            {
                test: function(filename, entry){
                    if(/\.s[ac]ss$/.test(filename)){
                        if(/\.vue\.s[ac]ss$/.test(filename)){
                            return false;
                        }
                        return true;
                    }
                    return false;
                },
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader, 
                        options:{
                        }
                    }, 'css-loader', 'sass-loader']
            },      
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                }
            },
            {
                test: /\.css$/,
                use: [
                  'vue-style-loader',
                  'css-loader'
                ]
            },
            {
                test: (filename, entry) => {
                    return /\.vue\.s[ac]ss/.test(filename);
                },
                use: [
                  'vue-style-loader',
                  'css-loader',
                  'sass-loader'
                ]
            }
        ]
    }

---

不需要测试功能。您可以在正则表达式中使用负查找

（？：

规则：[
//Vue单文件组件中的SASS和CSS文件：
{
测试：/\.vue\.（s？[ac]ss）$/，
用法：['vue-style-loader'、'css-loader'、'sass-loader']
},
//SASS和CSS文件（独立）：
{
测试：/（？感谢分享。我一直在尝试在我的网站/VueApp中包含VueJ和常规SCS，并使用您概述的函数方法解决了我的问题，而不是尝试通过正则表达式排除文件。