JavaScript-Webpack无法加载* .sass文件

前端之家收集整理的这篇文章主要介绍了JavaScript-Webpack无法加载* .sass文件 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在尝试加载* .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$/,'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扩展的任何文档

更新资料

通用/样式/ index.sass

@import "base"

common /样式/_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
..............
.......
........

通用/样式/_consts.sass

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

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

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

//Font sizes

$H0: 32px
.....
.....
.......
最佳答案
您需要尝试在scss中导入json.
原文链接:https://www.f2er.com/css/530694.html

猜你在找的CSS相关文章