Question

我想将一个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（编译我的应用后没有错误）

我错了什么？

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]

Answer 1

在Visual Studio Code等编辑器中打开项目，找到文件

.angular-cli.json

在apps配置数组下，添加样式数组。

"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": [],

如何使用webpack 2从node_modules导入css

1 个答案: