【发布时间】：2017-06-05 14:50:49
【问题描述】：
我想将一个 css 文件 (lightgallery.css) 从 node_modules 导入到 public_html。我的项目有这个结构
root
app/
main.jsx
...
public_html/
index.html
...
node_modules/
lightgallery/
...
webpacj.config.js
webpack.config.js
let config = {
entry: {
main: './app/main.jsx'
},
output: {
path: path.resolve(__dirname, 'public_html')
},
resolve: {
extensions: ['.js', '.json', '.css'],
alias: {
"lightgallery-css": path.resolve(__dirname, "./node_modules/lightgallery/src/css/lightgallery.css")
}
},
module: {
rules: [
{
test: /\.css$/,
// include: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(gif|png|jpg|jpeg|svg)$/,
use: {
loader: 'url-loader',
options: {
limit: 25000,
},
},
},
{
test: /\.(ttf|eot|woff|woff2)$/,
loader: 'file-loader',
options: {
limit: 50000,
name: 'fonts/[name].[ext]',
},
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: './app/index.html'
}),
new ExtractTextPlugin(path.resolve(__dirname, 'public_html') + '[name].bundle.css'),
]
}
module.exports = config;
我尝试以这种方式加载 .jsx 文件中的 css
import 'lightgallery/src/css/lightgallery.css'
但我在 public_html 中找不到 *.bundle.css（编译我的应用后我没有收到任何错误）
我做错了什么？
编辑2： webpack 的编译文件列表
Version: webpack 2.6.1
Time: 11314ms
Asset Size Chunks Chunk Names
14.js 11 kB 14 [emitted] CompaniesArchived
fonts/lg.eot 4.02 kB [emitted]
fonts/lg.woff 3.96 kB [emitted]
0.js 354 kB 0 [emitted] [big] ProjectActivitiesPagination
1.js 194 kB 1 [emitted] ProjectActivitiesShared
2.js 13.5 kB 2 [emitted]
3.js 14.1 kB 3 [emitted]
4.js 32.9 kB 4 [emitted] Account
5.js 36.2 kB 5 [emitted] Project
6.js 36.2 kB 6 [emitted] MyProject
7.js 34.7 kB 7 [emitted] Customer
8.js 33.5 kB 8 [emitted] Company
9.js 20.7 kB 9 [emitted] ProjectsArchived
10.js 20.7 kB 10 [emitted] MyProjectsArchived
11.js 14.2 kB 11 [emitted] CustomersArchived
12.js 22.3 kB 12 [emitted] Projects
13.js 7.85 kB 13 [emitted] PasswordChange
fonts/lg.ttf 3.88 kB [emitted]
15.js 9.26 kB 15 [emitted] Signup
16.js 27.8 kB 16 [emitted] AccountUpgrade
17.js 6.27 kB 17 [emitted] Login
18.js 4.29 kB 18 [emitted] AccountActivation
19.js 3.08 kB 19 [emitted] Search
20.js 5.56 kB 20 [emitted] ProjectsWithDeadline
21.js 4.12 kB 21 [emitted] ProjectsWithActivitiesToComplete
22.js 5.63 kB 22 [emitted] ProjectsForViewer
23.js 3.41 kB 23 [emitted] PasswordReset
24.js 6.9 kB 24 [emitted] MyProjects
25.js 1.36 kB 25 [emitted] Logout
26.js 7.82 kB 26 [emitted] Customers
main.js 1.06 MB 27 [emitted] [big] main
vendor.js 2.05 MB 28 [emitted] [big] vendor
index.html 2.66 kB [emitted]
nls/it/translation.js 7.88 kB [emitted]
nls/nls.js 182 bytes [emitted]
【问题讨论】：
-
您是否尝试将
[name].bundle.css路径解析为public_html？某些插件（如 AssetsPlugin）要求您这样做，即使您在output中指定了路径。我认为它看起来像这样：new ExtractTextPlugin(path.resolve(__dirname, './public_html') + '[name].bundle.css') -
@mhodges 我更新了代码，但没有任何改变
-
当。您的捆绑文件是否可以在任何地方输出？每当您运行 webpack 时，您是否看到它被列为捆绑包？
-
@mhodges 我在编译后添加了文件列表：只有.js和字体
-
也许尝试为文件路径设置别名？您可以在 webpack 配置对象的顶层添加
resolve属性，如下所示：resolve: { extensions: [(list file extensions you want to resolve)], alias: { "lightgallery-css$": path.resolve(_dirname, "./node_modules/lightgallery/src/css/lightgallery.css") }}然后在您的.jsx文件中尝试require("lightgallery-css")
标签： javascript css reactjs webpack