如何同时使用 MiniCssExtractPlugin 和 vue-style-loader？

Question

我想在我的组件文件 (Home.vue) 和单独的文件 (style.scss) 中使用 scss 同时。 Webpack 从 style.scss 生成 default.css - 我使用 MiniCssExtractPlugin 和 vue-style-loader。

我准备了 webpack.config.js，但是当我将 <style lang="scss" scoped> 更改为 <style lang="css" scoped> 时，它似乎不正确，否则一切正常。 <style lang="scss" scoped> 什么都不做 - 没有错误，没有效果。

如何将 webpack.config.js 改成 MiniCssExtractPlugin 和 vue-style-loader 同时工作？

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']
    }),


  ]
}

welcome.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

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

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

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

Answer 1

不需要测试功能。你可以在你的 RegEx 中使用否定的后向 (?<!...)：

rules: [
    // SASS and CSS files from Vue Single File Components:
    {
        test: /\.vue\.(s?[ac]ss)$/,
        use: ['vue-style-loader', 'css-loader', 'sass-loader']
    },
    // SASS and CSS files (standalone):
    {
        test: /(?<!\.vue)\.(s?[ac]ss)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
    }
]

Answer 2

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

但是 WebPack 是一个非常强大的工具。代替规则参数中的正则表达式，它可以采用带有两个参数（文件名和条目）的函数。

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

• <component name>.vue.js
• <component name>.vue 最后是
• <component name>.vue.css（或.scss）

注意： SASS 扩展依赖于 style 标签的 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'
                ]
            }
        ]
    }