在故事书中使用 scss @import 导入时出错
我开始在另一个项目中使用 storybook,我之前在另一个 repo 中已经让 SCSS @import 工作了,但我无论如何也想不出哪里出了问题。
ERROR in ./src/components/Navigation/style.scss (./node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/react-scripts/node_modules/postcss-loader/src??postcss!./node_modules/react-scripts/node_modules/sass-loader/lib/loader.js??ref--8-3!./node_modules/babel-loader/lib!./node_modules/style-loader!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/components/Navigation/style.scss) Module build failed (from ./node_modules/react-scripts/node_modules/sass-loader/lib/loader.js):
@import '../../styles/vars/colors'; ^
Invalid CSS after "'": expected 1 selector or at-rule, was "'use strict';"
.storybook 中的 webpack 配置
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';