webpack - 如何同时使用 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']
    }),


  ]
}

欢迎.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

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

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

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

<component name>.vue.js

<component name>.vue最后

<component name>.vue.css (或 .scss)

Note: The SASS extension depends on the lang parameter of the style tag.

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

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