在 Vue CLI 3 中使用 Extract-Text-Webpack-Plugin

Posted 2023-02-22

【中文标题】在 Vue CLI 3 中使用 Extract-Text-Webpack-Plugin

【英文标题】：Using Extract-Text-Webpack-Plugin with Vue CLI 3

【发布时间】：2018-10-18 15:59:16

【问题描述】：

我使用 Vue CLI 创建了一个应用程序，它现在在 vue.config.js 后面抽象出 Webpack 配置。我正在尝试将我的 CSS 提取到 styles.css 文件中。现在，它正在提取到随机命名的文件，如下所示：

dist\js\vendor.4ee179da.js 74.69 kb 26.68 kb dist\js\app.5e840ed0.js 4.06 kb 1.84 kb dist\css\app.4c22f75b.css 161.13 kb 21.59 kb

我怀疑我的 css.extract 需要是一个对象，比如

            fallback: 'style-loader',
            use: ['css-loader', 'sass-loader']

但是添加这个会破坏新的 _ValidationError2.default(ajv.errors, name) 的构建。

下面是我的 vue.config.js：

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = 
    // Project deployment base
    // By default we assume your app will be deployed at the root of a domain,
    // e.g. https://www.my-app.com/
    // If your app is deployed at a sub-path, you will need to specify that
    // sub-path here. For example, if your app is deployed at
    // https://www.foobar.com/my-app/
    // then change this to '/my-app/'
    baseUrl: '/',

    // where to output built files
    outputDir: 'dist',

    // whether to use eslint-loader for lint on save.
    // valid values: true | false | 'error'
    // when set to 'error', lint errors will cause compilation to fail.
    lintOnSave: true,

    // use the full build with in-browser compiler?
    // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
    compiler: false,

    // generate sourceMap for production build?
    productionSourceMap: true,

    // tweak internal webpack configuration.
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: () => ,
    configureWebpack: () => 
        new ExtractTextPlugin('assets/style.css')
    ,

    // CSS related options
    css: 
        // extract CSS in components into a single CSS file (only in production)
        // can also be an object of options to pass to extract-text-webpack-plugin
        extract: true,

        // Enable CSS modules for all css / pre-processor files.
        // This option does not affect *.vue files.
        modules: true,

        // enable CSS source maps?
        sourceMap: false,

        // pass custom options to pre-processor loaders. e.g. to pass options to
        // sass-loader, use  sass:  ...  
        loaderOptions: 
            sass:
                css: 'css-loader',
                'scss':'css-loader | sass-loader'
            
        
    ,

    // use thread-loader for babel & TS in production build
    // enabled by default if the machine has more than 1 cores
    parallel: require('os').cpus().length > 1,

    // options for the PWA plugin.
    // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: ,

    // configure webpack-dev-server behavior
    devServer: 
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 8082,
        https: false,
        hotOnly: false,
        // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
        proxy: null, // string | Object
        before: app => 
    ,

    // options for 3rd party plugins
    pluginOptions: 
        // ...
    

【参考方案1】：

修复它。这是正确的方法。在 CSS 下，将提取更改为：

extract: filename: 'styles.css'

我在其中保留了 loaderOptions、sourceMap 和模块对象，这似乎工作正常。

【讨论】：

我知道这可能有点老了。我正在使用 vue-cli 3 构建一个库。当我将库添加到需要单独导入 css 的应用程序时，使 CSS 工作正常。有没有办法导入库和css一起来？

【参考方案2】：

Vue CLI 3 实际上使用mini-css-extract-plugin，而不是extract-text-webpack-plugin。

当您传入extract: filename: 'styles.css' 时，您实际上是在配置mini-css-extract-plugin。你可以看到那些文档here。

您可以将filename 设置为mini-css-extract-plugin (docs)。 Here 是 Vue 传递它的地方。

您应该能够删除对extract-text-webpack-plugin 的所有引用，并且您的代码将继续正常工作！