带引导的Webpack Sass-loader

约翰

我刚刚得到了我的头放入的WebPack但是现在抛出一个适合当我尝试包括来自index.scss文件引导,萨斯。

该webpack conf很好用,并将.css文件输出到css / stylehseet.css

'use strict';

var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        stylesheet: path.resolve(__dirname, 'scss/index.scss')
    },
    output: {
        path: path.resolve(__dirname),
        filename: 'bundle.bootstrap-sass.js'
    },
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract(
                    'style', // backup loader when not building .css file
                    'css!sass' // loaders to preprocess CSS
                )
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('css/[name].css')
    ],
    resolve: {
        modulesDirectories: [
            './node_modules'
        ]
    }
};

问题是,在index.scss我必须包括自举顶嘴。index.scss,根据https://www.npmjs.com/package/sass-loader#imports,您添加〜,然后webpack应该解决所有问题:

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

问题在于我的尝试不是:/。我得到的输出:

Hash: b59b46e5946e7ab3d888
Version: webpack 1.13.3
Time: 1852ms
                   Asset    Size  Chunks             Chunk Names
bundle.bootstrap-sass.js  171 kB       0  [emitted]  css
    + 9 hidden modules

ERROR in ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot
Module parse failed: /mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:0)
    at Parser.pp$4.raise (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/acorn/dist/acorn.js:2756:10)
    at Parser.pp$7.readToken (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/acorn/dist/acorn.js:2477:17)
    at Parser.pp$7.nextToken (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/acorn/dist/acorn.js:2468:15)
    at Parser.parse (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/acorn/dist/acorn.js:515:10)
    at Object.parse (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.finished (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at /mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:445:3)
 @ ./~/css-loader!./~/sass-loader!./scss/index.scss 6:4172-4253 6:4276-4357

ERROR in ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2
..... etc etc

Webpack非常强大,但是它确实带您走动了房子……这是我的package.json文件

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "John Carmichael",
  "license": "ISC",
  "dependencies": {
    "bootstrap-sass": "^3.3.6"
  },
  "devDependencies": {
    "css-loader": "^0.25.0",
    "extract-text-webpack-plugin": "latest",
    "node-sass": "^3.11.2",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3"
  }
}

我缺少任何人都可以发现的小东西吗:)?

迪米特里斯·卡拉吉尼斯
ERROR in ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot
Module parse failed: /mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.

有你的问题。

编译器正在尝试加载.eot字体文件,但是它不知道如何处理它,因为您没有使用适当的加载器。

首先,installl的file-loaderurl-loader在你的开发依赖,就像这样:npm install file-loader url-loader -D

然后,在你装载机添加这些

{
    test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
    test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
},
{
    test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'file-loader'
},

这样,您将能够加载大多数类型的字体

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Webpack 2 sass-loader 意外字符“@”

Webpack sass-loader无效的CSS

如何使用 sass @use 和 webpack sass-loader

Webpack文件加载器和sass-loader

Webpack sass loader无法识别全局变量文件

如何在React和Webpack中使用Sass-loader?

webpack sass-loader不生成CSS文件

Webpack 3:使用sass-loader,ExtractTextPlugin不起作用

Webpack 的 Sass Loader:如何获取 CSS 文件而不是内联样式?

webpack:SASS加载器失败“模块构建失败(来自./node_modules/sass-loader/lib/loader.js)”

具有vue-loader和sass-loader的Webpack无法导入.scss文件

加载程序列表中的元素应具有sass-loader webpack的“ loader”或“ loaders”

Webpack中带有sass-loader和postcss-loader的sourceMap

Webpack SASS-loader包含语句中断SASS @import statemetns

带有sass-loader和resolve-url-loader的Webpack 4-找不到图像路径

如何使postcss-loader,postcss-cssnext和sass-loader在webpack中一起工作?

如何升级Sass-Loader

为什么Webpack的sass-loader在生产模式下将CSS最小化?

Vuetify 和 Webpack - 编译自定义变量时出错(sass-loader 失败)

Webpack 4 sass-loader导入文件,路径中不带〜波浪号

图像不显示在生产版本中,仅在dev(webpack / sass-loader)中显示

webpack(使用sass-loader)-scss文件@import无法识别解析别名

如何使用当前Webpack配置从sass-loader获得有效的CSS?

如何在我的 Webpack sass-loader 配置中为 SCSS 指定资源根目录?

sass-loader 不生成 css

sass-loader 无法解析@import url

强制sass-loader修改CSS文件

无法使用“ sass-loader”内联样式

sass-loader无法解析@use规则