首页 文章

Webpack URL和文件加载器不支持Angular 2所需的组件样式

提问于
浏览 次
7

我正在构建一个带有角度2，sass和webpack的应用程序，我在每个组件内部需要的sass文件上使用url时遇到麻烦（使用require）;它不会将这些文件复制并将其复制到assets文件夹，也不会将url修改为构建的css样式 . 当我使用import和html组件中的资源时，它工作正常 .

装载机：

...{
            test: /\.html$/,
            loader: 'html'
        },
        {
            test: /\.(png|jpe?g|gif)$/,
            loader: 'file?name=assets/[name].[hash].[ext]'
        },
        {
            test: /\.scss/,
            exclude: helpers.root('src', 'app'),
            loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap')
        },
        {
            test: /\.scss$/,
            include: helpers.root('src', 'app'),
            loaders: ['raw', 'resolve-url', 'sass?sourceMap']
        }...

需要款式：

...
styles: [require('./hero-image.scss')]
template: require('./hero-image.component.html')
...

萨斯

...
background: url('../../../public/img/hero-bg.jpg');
...

这里的加载器（构建时）应该将hero-bg.jpg复制到/ assets /，并且在构建的css中，背景应该是 /assets/hero-bg.jpg 但它不会将图像复制到资源文件夹，而css构建的仍然像sass .

NOTE: 当我使用import而不是require（当然修改加载器规则）时，它可以正常工作 . 在html组件（hero-image.component.html）里面，我有 <img src="../../../public/img/btn-google-play.jpg" /> ，它也正常工作 .

我尝试this angular 2 starter pack，问题也发生了 .

谢谢你的帮助，我真的很感激 .

编辑：我忘了提到这也发生只使用css（没有sass）并遵循official angular documentation about webpack

sass angular requirejs webpack

3 回答

  • 3

    经过大量的研究和许多尝试后，我发现了一种使用exports-loader的方法，可以轻松更新 .

    {
   test: /\.scss$/,
   include: helpers.root('src', 'app'),
   loaders: ['exports-loader?module.exports.toString()', 'css', 'sass']
}

    感谢@BobSponge的帮助，你引导我朝着正确的方向前进 .

    回复于
  • 0

    在Angular文档中看起来不正确的配置示例 .

    这些加载器都不会在css中处理 url() 并将资产发布到目标文件夹： 'raw', 'resolve-url', 'sass' . 尽管有这个名字， resolve-url 加载器只是将相对url替换为适合 css-loader .

    所以，你应该将 css-loader 添加到最后一个scss loader的配置中：

    {
   test: /\.scss$/,
   include: helpers.root('src', 'app'),
   loaders: ['css', 'resolve-url', 'sass?sourceMap']
}

    样式要求将更改为：

    styles: [require('./hero-image.scss').toString()]

    来自docs： @import 和 url(...) [在css文件中]被解释为 require() ，将由 css-loader 解析 .

    回复于
  • 13

    exports-loader?module.exports.toString() 的替代方法是使用css-loader readme中提到的to-string-loader

    回复于

相关问题