Webpack 无法加载 *.sass 文件

Posted 2023-02-22

【中文标题】Webpack 无法加载 *.sass 文件

【英文标题】：Webpack can't load *.sass files

【发布时间】：2019-07-18 04:54:23

【问题描述】：

我正在尝试加载 *.sass 和 *.scss 文件。

webpack.config：

  module: 
    rules: [
      
        test: /\.json$/,
        loaders: ['json-loader'],
      ,
      
        test: /\.(scss|sass)$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
        exclude: /(node_modules)/,
      ,
      
        test: /\.(ts|js)x?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      ,
       
         test: /\.css$/,
         loaders: ['style-loader', 'css-loader'],
       ,
      
        test: /\.(jpe?g|png|gif)$/i,
        loaders: ['file?name=[hash].[name].[ext]', 'image-webpack?bypassOnDebug&optimizationLevel=7'],
      ,
      
        test: /\.font\.js$/,
        loaders: ['style-loader', 'css-loader', 'fontgen-loader?types=ttf'],
      ,
      
        test: /\.svg(\?.*)?$/,
        loaders: ['url-loader'],
      ,
      
        test: /\.ttf(\?.*)?$/,
        loader: 'url?limit=10000&mimetype=application/octet-stream',
      ,
      
        test: /\.(woff|woff2)(\?.*)?$/,
        loader: 'url?limit=10000&mimetype=application/font-woff',
      ,
      
        test: /\.eot(\?.*)?$/,
        loader: 'url?limit=10000&mimetype=application/vnd.ms-fontobject',
      ,
    ],
  ,

错误：

ERROR in ../common/styles/index.sass (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!../common/styles/index.sass)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):


^
      Invalid CSS after "": expected 1 selector or at-rule, was ""
      in /Users/stavalfi/WebstormProjects/mui/js/common/styles/colors.json (line 1, column 1)
 @ ../common/styles/index.sass 2:14-164 21:1-42:3 22:19-169
 @ ./app/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 react-hot-loader/patch webpack-dev-server/client?http://localhost:8080 @babel/polyfill ./app

我错过了什么？我在 https://github.com/webpack-contrib/sass-loader 中找不到任何关于 sass 扩展的文档

---

更新

common/styles/index.sass

@import "base"

common/styles/_base.sass

@import "consts"
$sans-serif-font: 'Lato', Helvetica, 'Liberation Sans', sans-serif
$imgs: "~images"

.user-agent-windows .sf
  line-height: 14px

.ellipsis
  text-overflow: ellipsis
  white-space: nowrap
  overflow: hidden

.transparent
  opacity: 0
..............
.......
........

common/styles/_consts.sass

@import "./colors.json"
@import "./consts.json"

@function shade($color, $percentage)
  @return mix(black, $color, $percentage)

@function tint($color, $percentage)
  @return mix(white, $color, $percentage)

//Font sizes

$H0: 32px
.....
.....
.......

【参考方案1】：

您需要尝试在 scss 中导入 json。

【讨论】：

好吧，答案是： loader: 'sass-loader', options: indentedSyntax: true, importer: jsonImporter, , , 而不是 sass-loader。谢谢！！！！！！