Question

我想打包css文件并将其插入我的应用程序的影子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文件的加载程序中删除了它。

可以在es6中将css文件作为字符串导入吗？

1 个答案: