webpack - 将 css 作为字符串导入 (vue-cli)

Question

一开始，我从vue-cli last version

创建了一个清晰的项目 vue create project

在 main.js 中，我尝试从 './test.css' 中导入样式，在我的 test.css 中，我有两个类。

在 console.log(styles) 或 console.log(styles.className) 中，我发现了 empty object 或 undefined，为什么会这样？

顺便说一句，styles.toString() 不起作用，我在 vue-cli 文档中找到了 https://github.com/css-modules/css-modules但它也不起作用。

我还发现了这样一个写作结构:

var myStyle = require('./test.css');
myStyle.use(); //inject it via a `<style>` element
myStyle.unuse(); //removes it

http://tomasalabes.me/blog/web-development/2016/09/13/Webpack-Series-Part-4.html

但是也行不通...

也许我做错了什么？抱歉，有人可以解释一下吗？

Answer 1

npm install --save-dev raw-loader

const styles = require('!!raw-loader!../public/file.css');

// object
console.log(styles);

// string of original file
console.log(styles.default);