时间戳

首页 > 解决方案 > 可以在es6中将css文件作为字符串导入吗？

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

问题描述

我想打包 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;
}

它似乎对我不起作用。

有没有办法做到这一点？

标签： javascriptcsswebpackes6-modules

解决方案

从您的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 文件的加载程序中删除了它。

推荐阅读