如何使用webpack从node_modules加载静态CSS文件的示例？ [英] Example of how to load static CSS files from node_modules using webpack?

问题描述

我不知道如何加载webpack从node_modules libs的任何CSS，例如我已经安装了小叶和每次尝试载入 leaflet / dist / leaflet.css 失败。

I don't know how to load with webpack any CSS from node_modules libs, for example I've installed leaflet and each attempt of load leaflet/dist/leaflet.css fails.

您能提供如何从node_modules加载静态样式的示例吗？

Could you provide example how to load static styles from node_modules?

。我使用 extract-text-webpack-plugin 和 sass-loader 我的项目scss文件工作正常，我还有 css-loader ，我有解决静态css文件或添加到 stylePathResolves ？

My current webpack config below. Additionaly I'm using extract-text-webpack-plugin and sass-loader my project scss files are working well, I have also css-loader, have I to resolve static css files or add something to stylePathResolves?

//require('leaflet/dist/leaflet.css');

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

var stylePathResolves = (
  'includePaths[]=' + path.resolve('./') + '&' +
  'includePaths[]=' + path.resolve('./node_modules')
)

module.exports = {
  entry: ".js/app.js",
  output: {
    path: "./static/js",
    filename: "app.js"
  },
  module: {
    loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel'
      }, {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(
          'style',
          'css' + '!sass?outputStyle=expanded&' + stylePathResolves
        )
      }
    ]
  },
  plugins: [new ExtractTextPlugin("app.css")]
};

在哪里加载leaflet.css，注释掉 require（'leaflet / dist /leaflet.css'）给我以下错误：

Where to load leaflet.css, commented out require('leaflet/dist/leaflet.css') gives me following error:

home/myproj/node_modules/leaflet/dist/leaflet.css:3
.leaflet-map-pane,
^

SyntaxError: Unexpected token .

推荐答案

对于遇到类似问题的用户，

For users who have encountered a similar problem, there are steps that I've done to get it working, I'm not sure that this equilibrium way.

1. npm install file-loader --save


2. 添加 import'leaflet / dist / leaflet.css'; 在主要的app.js中


3. 按以下方式更改webpack.config.js：

1. npm install file-loader --save
2. add import 'leaflet/dist/leaflet.css'; in main app.js
3. change webpack.config.js by following way:

add css-loader 以除去语法错误：意外的令牌，然后添加文件加载器和匹配文件以摆脱未捕获错误：无法找到模块./images/layers.png：

add css-loader to get rid of SyntaxError: Unexpected token . and next add file-loader and match files to get rid of Uncaught Error: Cannot find module "./images/layers.png":

module.exports = {
  entry: "./web/static/js/app.js",
  output: {
    path: "./priv/static/js",
    filename: "app.js"
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel'
    }, {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract(
        'style',
        'css' + '!sass?outputStyle=expanded&' + stylePathResolves
      )
    }, {
      test: /\.css$/,
      loader: "style-loader!css-loader"
    }, {
      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
      loader: 'file-loader'
    }]
  },
  plugins: [new ExtractTextPlugin("app.css")]
};

在一开始我从一些例子得到了这个配置，它不是100％清楚为什么我使用 ExtractTextPlugin 加载scss和什么关联与css加载器，也许更一致的，我应该使用ExtractTextPlugin也在这一部分，也许有人知道，可以代码审查？但我的解决方案是工作，我可以进一步工作。

At the beginning I got this config from some example and it's not 100% clear why I've used ExtractTextPlugin to load scss and what the correlation is with css-loader, maybe to be more coherent should I use ExtractTextPlugin also in this part, maybe someone knows and can code review? But my solution is working and I can work further.

这篇关于如何使用webpack从node_modules加载静态CSS文件的示例？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！