如何使用webpack从node_modules导入css 2

我想从node_modules导入一个css文件（lightgallery.css）到public_html。我的项目具有这种结构如何使用webpack从node_modules导入css 2

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（编译我的应用后，我没有收到任何错误）

我错了什么？

EDIT2：的的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]

来源

2017-06-05 Webman

你试过解决public_html的'[name] .bundle.css'路径吗？一些插件（比如AssetsPlugin）要求你这样做，即使你在'output'中指定了一个路径。我认为它应该是这样的：'新的ExtractTextPlugin（path.resolve（__ dirname，'./public_html'）+'[name] .bundle.css'）' – mhodges

@mhodges我更新了代码，但没有任何更改 – Webman

Dang。你的捆绑文件是否在任何地方都能输出？当你运行webpack时，你是否看到它被列为一个包？ – mhodges

公开赛在像Visual Studio代码编辑器项目的列表中，找到该文件

.angular-cli.json

的应用下

配置数组，添加样式数组。

"apps": [{ 
     "root": "src", 
     "outDir": "dist", 
     "assets": [ 
      "assets", 
      "favicon.ico" 
     ], 
     "index": "index.html", 
     "main": "main.ts", 
     "polyfills": "polyfills.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.app.json", 
     "testTsconfig": "tsconfig.spec.json", 
     "prefix": "app", 
     "styles": [ 
      "../node_modules/bootstrap/dist/css/bootstrap.css", 
      "styles.css" 
     ], 
     "scripts": [],

来源

2017-06-05 15:48:04

考虑到OP使用'.jsx'，我非常怀疑他们正在使用Angular，这意味着他们将不太可能使用'angular-cli'，这意味着他们没有他们项目中的'.angular-cli.json'文件。 – mhodges

好的。对于Angular项目，这是全球添加CSS的方式，webpack将绑定并添加到html文件。 –

我是usiing反应不角;;） – Webman

如何使用webpack从node_modules导入css 2

回答

相关问题