我开始在另一个项目中使用storybook,之前我已经让SCSS@import在另一个回购项目中工作过,但我一辈子都搞不清楚到底出了什么问题。
错误/src/组件/导航/样式。scss(./node_modules/react scripts/node_modules/css loader/dist/cjs.js??ref--8-1!。/node_modules/react scripts/postss loader/src??postss!。/node_modules/sass loader/lib/loader.js??ref--8-3!。/node_modules/babel loader/lib/node_modules/style loader!。/node_modules/css/sass loader!。/css/lib.js/src/组件/导航/样式。scss)模块构建失败(来自./node_modules/react scripts/node_modules/sass loader/lib/loader.js):
@导入'.../.../样式/变量/颜色;^
“'”后的CSS无效:应为1个选择器或at规则,为“'use strict'”
我的网页配置内的。故事书
const path = require('path');
module.exports = {
entry: ['@babel/polyfill'],
devtool: 'eval-source-map',
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.stories\.jsx?$/,
loaders: [require.resolve('@storybook/addon-storysource/loader')],
},
{
test: /\.(scss|css)$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true,
import: true,
importLoaders: 1,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
{
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer')({
overrideBrowserslist: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9'
]
})
]
}
}
]
},
{
test: /\.(eot|otf|ttf|woff|woff2)$/,
loader: 'file-loader?name=public/fonts/[name].[ext]',
},
{
test: /\.svg$/,
loader: 'file-loader',
query: {
name: 'assets/images[name].[hash:8].[ext]',
},
},
{
test: /\.(gif|png|jpe?g)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
disable: true,
},
},
],
},
],
},
resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
extensions: ['.js', '.jsx', '.json'],
},
};
相关软件包的版本:"node-sass":"^4.7.2","sass-loader":"^6.0.5","@storybook/react":"^5.1.4","file-loader":"^4.0.0","postcss-loader":"2.0.5","style-loader":"0.17.0","url-loader":"^2.0.1",
虽然我不确定您在哪个上下文中使用此导入,但在从SCSS文件导入中省略文件扩展名时,我遇到了类似的问题。
尝试使用以下语法:
@import '../../styles/vars/colors.scss';