javascript - 将处理后的 CSS 提取为 VueJS 组件上的属性以供运行时使用

Question

是否可以获取 Vue 组件的 CSS，并在构建运行时使用的库时将其作为字符串附加到组件？

vue-cli-service build --mode production --target lib --name components src/index.ts

我目前使用自定义 block 为一些自定义 js 实现了这一点:
vue.config.js:

...
 rules: [
      {
        resourceQuery: /blockType=client-script/,
        use: './client-script-block',
      },
   ],
},
...

客户端脚本block.js:

module.exports = async function () {

  return `export default function (Component) {
      Component.options.__client_script = ${JSON.stringify(this.resourcePath)};
    }`;
};

然后在使用该库的 Vue 应用程序中公开字符串。但是用 CSS 实现同样的目标似乎并不奏效。

Answer 1

您可以查看 中的这个 CSS 提取模块VueLoader ，从特定文件或文件中提取 CSS，并将其存储在自定义文件中，然后您可以在运行时动态加载，例如:
安装:

npm install -D mini-css-extract-plugin

    

// webpack.config.js
    var MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  // other options...
  module: {
    rules: [
      // ... other rules omitted
      {
        test: /\.css$/,
        use: [
          process.env.NODE_ENV !== 'production'
            ? 'vue-style-loader'
            : MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    // ... Vue Loader plugin omitted
    new MiniCssExtractPlugin({
      filename: 'style.css'
    })
  ]
}

引用: https://vue-loader.vuejs.org/guide/extract-css.html#webpack-4 :
另一种方法:

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  // other options...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          extractCSS: true
        }
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ]
}

引用: https://vue-loader-v14.vuejs.org/en/configurations/extract-css.html
此外，您还可以在此处获得从 SSR(服务器端渲染)应用程序中提取 CSS 的完整指南: https://ssr.vuejs.org/guide/css.html#enabling-css-extraction