是否可以在 es6 中將 css 文件作為字符串導入？

Question

我想打包 css 文件並將其插入到我的應用程序中的 shadow DOM 中。

我已經嘗試過css-loader 的方法：

如下文件： webpack.config.js

const path = require('path');
const CopyWebpackPlugin = require("copy-webpack-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin')


module.exports = {
    context: path.resolve(__dirname, 'src'),
    entry: {
      content: './content/index.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    module: {
        rules: [
            {
                use: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            },
            {
              test: /\.vue$/,
              loader: 'vue-loader'
            },
            {
              test: /\.css$/,
              use: [
                'vue-style-loader',
                'to-string-loader',
                {
                  loader: 'css-loader',
                  options: {}
                }
              ]
            }
        ]
    }
}

我嘗試使用這樣的方式：

const css = require('./test.css').toString();

console.log(css); // [Object, Object]

import styles from './test.css';
console.log(styles) // {}

CSS文件：

#app{
  position: fixed;
  right: 0;
  top:0;
  width: 420px;
  height: 420px;
  z-index: 9999;
}

它似乎對我不起作用。

有沒有辦法做到這一點？

Answer 1

從您的webpack.config.js ，您為.css文件指定的加載程序的順序似乎是從后到前的。

嘗試反轉use數組中加載器的順序，以便將css-loader結果傳遞給to-string-loader ，然后從to-string-loader傳遞到您的腳本：

{
    test: /\.css$/,
    use: [
        'to-string-loader',
        'css-loader'
    ]
}

另外，我不確定您是否需要在此處包含vue-style-loader ，這就是我從應用於 css 文件的加載器中刪除它的原因。