我不知道如何使用webpack从node_modules libs加载任何CSS,例如我安装了传单,每次加载尝试都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?output + 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 .
luzny.. 12
对于遇到类似问题的用户,我已经采取了一些步骤来实现它,我不确定这种均衡方式.
npm install file-loader --save
添加import 'leaflet/dist/leaflet.css';
主app.js
通过以下方式更改webpack.config.js:
添加css-loader
摆脱SyntaxError: Unexpected token .
和下一个添加file-loader
和匹配文件摆脱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?output + 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可能会更加连贯,也许是某人知道并可以编码审查?但我的解决方案正在发挥作用,我可以继续努力.
对于遇到类似问题的用户,我已经采取了一些步骤来实现它,我不确定这种均衡方式.
npm install file-loader --save
添加import 'leaflet/dist/leaflet.css';
主app.js
通过以下方式更改webpack.config.js:
添加css-loader
摆脱SyntaxError: Unexpected token .
和下一个添加file-loader
和匹配文件摆脱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?output + 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可能会更加连贯,也许是某人知道并可以编码审查?但我的解决方案正在发挥作用,我可以继续努力.