Vue CLI-从.scs文件的目录中单独编译CSS文件

Question

我使用的是Vue CLI，它抽象了运行和构建应用程序的大部分Webpack配置。这带来了一些好处，但我不知道如何为.scss文件的目录创建特定的规则。

我希望这些文件而不是在构建时提取到单个.css文件中，而是单独编译到主题目录(./dist/themes(中。

我试图在vue.config.js中创建一个规则来识别目录，但它不起作用：

module.exports = {
runtimeCompiler: true,
configureWebpack: config => {
config.module.rules.push(
{
test: /.md$/,
use: 'raw-loader'
},
{
test: /.ya?ml$/,
type: 'json', // Required by Webpack v4
use: 'yaml-loader'
}
)
},
module: {
rules: [
{
test: /.scss$/i,
loader: 'css-loader',
options: {
import: (url, media, resourcePath) => {
// Find .scss files in src/assets/themes 
if (url.includes('./src/assets/themes')) {

}
},
},
},
],
},
}

感谢

Answer 1

我认为vue.config.js中的格式不正确。这就是将scs选项传递给加载器的方式：

css: {
loaderOptions: {
scss: {
// options
}
}
}

我不确定如何将输出配置为您想要的样子，但这应该会对您有所帮助。要查看vue.config.js在webpack方面被翻译成什么，可以运行vue inspect