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

【问题标题】：Using Extract-Text-Webpack-Plugin with Vue CLI 3在 Vue CLI 3 中使用 Extract-Text-Webpack-Plugin
【发布时间】：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: {
        // ...
    }
}

【问题讨论】：

标签： webpack vue.js vue-cli

【解决方案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 的所有引用，并且您的代码将继续正常工作！

【讨论】：