Vuejs2 如何将静态CSS与VueJS和webpack一起使用

我在网页包、VUE和CSS静态文件方面有些困难。请看，我想用注入单个文件组件中的样式，并且我还想要有一些有用类的静态CSS文件。我正在运行Webpack4，我不清楚如何处理静态CSS文件的情况。 这是我目前的网页配置：

const path=require（'path'）；
const VueLoaderPlugin=require（'vue-loader/lib/plugin'）；
const HtmlWebpackPlugin=require（'html-webpack-plugin'）；
const WebpackMerge=require（'webpack-merge'）；
const makeConfig=（mode）=>require（`./build-utils/webpack.${mode}.js`）（mode）
const MiniCss=require（'mini-css-extract-plugin'）；
module.exports=（env）=>{
返回WebpackMerge.merge(
{
模式：环境模式，
条目：'./src/main.js'，
输出：{
文件名：'[name].js'，
公共路径：“/”，
path:path.resolve（uu dirname，'./dist'）
},
模块：{
规则：[
{
测试：/\.vue$/,，
排除：/node_模块/，
加载程序：“vue加载程序”
},
{
测试：/\（js）$/，
排除：/node_模块/，
使用：[
{loader:'babel loader'}
]
},
{
测试：/\（css）/，
使用：[
MiniCss.loader，
“css加载器”
],
包括：/\assets\.css$/
},
{
测试：/\（css）/，
使用：[
“样式加载器”，
“css加载器”
],
排除：/\assets\.css$/，
},
{
测试：/\（png | jpg | gif | svg）$/i，
使用：[
{
加载器：“文件加载器”，
选项：{
名称：'[name].[ext]'，
esModule:错误
}
}
]
}
]
},
插件：[
新的VueLoaderPlugin（），
新HtmlWebpackPlugin({
模板：“index.html”
}),
新的MiniCss（）
]
},
makeConfig（环境模式）
)    
}

我的静态css位于/src/assets下。然后我的CSS资产被导入到入口点javascript文件中。问题是我没有发出静态CSS文件。两者的解决方案是什么：使用静态css和单组件css。

---

谢谢大家!

您好，我的方法是在

App.vue

组件的样式部分导入静态css:

@import./assets/styles.css”

在网页包配置中，我将导入css变量。你有css变量还是简单的css代码？现在是简单的css，但我想我会转向SASS。很好的方法，我会试试。对你有用吗？