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