错误导入与scss@导入在故事书

Question

我开始在另一个项目中使用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"，

Answer 1

虽然我不确定您在哪个上下文中使用此导入，但在从SCSS文件导入中省略文件扩展名时，我遇到了类似的问题。

尝试使用以下语法：

@import '../../styles/vars/colors.scss';