javascript – 如何使用webpack从node_modules加载静态CSS文件的示例？

我不知道如何使用来自node_modules libs的webpack加载任何CSS,例如我安装了传单,并且每次尝试load leaflet / dist / leaflet.css都会失败.

你能举例说明如何从node_modules加载静态样式吗？

我目前的webpack配置如下.另外我正在使用extract-text-webpack-plugin和sass-loader我的项目scss文件运行良好,我也有css-loader,我有解析静态css文件或者向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’)给出了以下错误：

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

SyntaxError: Unexpected token .

解决方法:

对于遇到类似问题的用户,我已经采取了一些步骤来实现它,我不确定这种均衡方式.

> npm install file-loader –save
>添加导入’leaflet / dist / leaflet.css’;在主app.js
>按以下方式更改webpack.config.js：

添加css-loader以摆脱SyntaxError：意外的令牌.然后添加文件加载器和匹配文件以摆脱未捕获错误：找不到模块“./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-loader的相关性,如果我在这部分也使用ExtractTextPlugin可能更加连贯,也许有人知道并可以编码审查？但我的解决方案正在发挥作用,我可以继续努力.

标签：javascript,css,webpack,webpack-style-loader
来源： https://codeday.me/bug/20190926/1819283.html