Is that possible to import css file as string in es6?

Question

I want to pack the css file and insert it into shadow DOM in my app.

I have tried the way from css-loader:

As following the file :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: {}
                }
              ]
            }
        ]
    }
}

I tried to use the way like this:

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

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

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

CSS file:

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

It seem not to work for me.

Is there having a way to do it?

I tried `const css = require('to-string-loader!css-loader!./test.css').toString();` and `const css = require('to-string-loader!./test.css').toString();`, the first way is CssSyntaxError, another output the same result. — Champer Wu, Aug 27 '19 at 04:52
At the render page, the `` has been inserted in head element — Champer Wu, Aug 27 '19 at 05:07
Maybe that is a to grab the style tag to insert it into `Shadow DOM` — Champer Wu, Aug 27 '19 at 05:08

score 4 · Accepted Answer · answered Aug 27 '19 at 05:18

4

From your webpack.config.js, it seems that the order you've specifeid the loaders for .css files is back to front.

Try revervsing the order of loaders in the use array so that the results of the css-loader are passed to the to-string-loader, and then from the to-string-loader to your script:

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

Also, I'm not sure you need to include vue-style-loader here, which is why I've removed that from the loaders applied to css files.

answered Aug 27 '19 at 05:18

Dacre Denny

29,664
5
45
65

The order is same as origin, `to-string-loader` is an index lower than `css-loader` – Champer Wu Aug 27 '19 at 05:23
Yeah, I think you are right. If you want to insert the css file into the Shadow DOM, and the `vue-style-loader` is useless – Champer Wu Aug 27 '19 at 05:24
I remove the `vue-style-loader`, and it works for me. Thanks a lot! – Champer Wu Aug 27 '19 at 05:26

Is that possible to import css file as string in es6?

1 Answers1