在故事书中使用 scss @import 导入时出错

Posted 2023-02-19

【中文标题】在故事书中使用 scss @import 导入时出错

【英文标题】：Error Importing with scss @import in storybook

【发布时间】：2019-11-16 03:35:33

【问题描述】：

我开始在另一个项目中使用故事书，我之前在另一个 repo 中已经让 SCSS @import 工作，但我终生无法弄清楚出了什么问题。

./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) 模块构建失败（来自 ./node_modules/react-scripts/node_modules/sass-loader/lib/loader.js）：

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

“'”后的 CSS 无效：预期 1 个选择器或规则，是“'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'],
  ,
;

相关包的版本： “节点萨斯”：“^4.7.2”， "sass-loader": "^6.0.5", "@storybook/react": "^5.1.4", "文件加载器": "^4.0.0", “postcss-loader”：“2.0.5”， “样式加载器”：“0.17.0”， "url-loader": "^2.0.1",

【问题讨论】：

也许this discussion 会有所启发

还有这个：npmjs.com/package/@storybook/preset-scss

【参考方案1】：

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

尝试使用以下语法：

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