是否可以在 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 文件的加载器中删除了它。