我正在尝试在vue上创建故事书。我的组件使用sass编写。因此,我在.storybook / main.js中做到了这一点:
webpackFinal: (config) => {
config.module.rules.push({
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
})
return config
}
样式如下所示:
<style lang="sass" scoped>
button
background-color: red
</style>
所以我在尝试编译时遇到此错误:
SassError: Invalid CSS after "": expected 1 selector or at-rule, was "button"
on line 1 of C:\Code\testproj\src\components\UI\TestComponent.vue
如果我将样式更改为:
<style lang="sass" scoped>
button {
background-color: red
}
</style>
一切正常,但这不是一个sass语法。
我遇到了完全相同的问题,并且能够解决它。问题出在webpack配置中。如果您使用的是SASS,则webpack.config.js
文件.storybook
夹中的文件应如下所示:
module.exports = ({ config }) => {
config.module.rules.push({
test: /\.sass$/,
use: [
require.resolve("vue-style-loader"),
require.resolve("css-loader"),
{
loader: require.resolve("sass-loader"),
options: {
sassOptions: {
indentedSyntax: true
}
}
}
],
});
return config;
};
如果您使用的是SCSS,则应该像这样:
module.exports = ({ config }) => {
config.module.rules.push({
test: /\.scss$/,
use: [
require.resolve("vue-style-loader"),
require.resolve("css-loader"),
require.resolve("sass-loader"),
],
});
return config;
};
在阅读Vue Loader文档时我能够弄清楚这一点
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句