Question

我使用雅虎的yo fluxible generator（http://fluxible.io/quick-start.html之后）。

我创建了一个名为 assets 的新文件夹，在其中我有另一个名为 styles 的文件夹，其中包含我的.less文件。

所以，

 [Project]
 |
 +-- [assets]
     |    
     +-- [styles]
         |
         +-- main.less
         |
         +-- componentOne.less
 +-- [components]
     |    
     +-- App.js
     |
     +-- ComponentOne.js
 |
 +-- webpack.config.js

这是我的webpack.config.js的样子：

var webpack = require('webpack');
var path = require('path');

var webpackConfig = {
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './client.js'
    ],
    output: {
        path: path.resolve('./build/js'),
        publicPath: '/public/js/',
        filename: 'main.js'
    },
    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loaders: [
                    require.resolve('react-hot-loader'),
                    require.resolve('babel-loader')
                ]
            },
            { test: /\.json$/, loader: 'json-loader'},
            {
                test: /\.less$/,
                loader: "css!less"
              }
        ]
    },
    node: {
        setImmediate: false
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV)
            }
        })
    ],
    devtool: 'eval'
};

module.exports = webpackConfig;

但是，当我npm run dev时，我收到以下错误：

module.js：340       扔错了;       ^

错误：无法找到模块＆＃39; ./ main.less＆＃39;       在Function.Module._resolveFilename（module.js：338：15）       在Function.Module._load（module.js：289：25）       在Module.require（module.js：366：17）       at require（module.js：385：17）       在对象。（/home/userOne/Development/reactjs/fluxible/fluxible-posts/components/Home.js:2:1）       在Module._compile（module.js：435：26）       在normalLoader（/home/userOne/Development/reactjs/fluxible/fluxible-posts/node_modules/babel-core/lib/api/register/node.js:199:5）       在Object.require.extensions。（匿名函数）[as .js]（/home/userOne/Development/reactjs/fluxible/fluxible-posts/node_modules/babel-core/lib/api/register/node.js:216： 7）       在Module.load（module.js：356：32）       在Function.Module._load（module.js：313：12）

这是Home.js组件：

import React from 'react';
require('../assets/styles/main.less');

class Home extends React.Component {
    render() {
        return (
            <div>
                <h2>Home</h2>
                <p>Welcome to the site!</p>
            </div>
        );
    }
}

export default Home;

感谢@zerkms，我安装了less模块。但是，现在发生以下情况：

/home/userOne/Development/reactjs/fluxible/fluxible-posts/assets/styles/main.less: Unexpected token (1:1)
> 1 | p{color:red;}
    |  ^
    at Parser.pp.raise (/home/userOne/Development/reactjs/fluxible/fluxible-posts/node_modules/babylon/lib/parser/location.js:24:13)
    at Parser.pp.unexpected (/home/userOne/Development/reactjs/fluxible/fluxible-posts/node_modules/babylon/lib/parser/util.js:82:8)
    at Parser.pp.semicolon (/home/userOne/Development/reactjs/fluxible/fluxible-posts/node_modules/babylon/lib/parser/util.js:69:81)
    at Parser.pp.parseExpressionStatement (/home/userOne/Development/reactjs/fluxible/fluxible-posts/node_modules/babylon/lib/parser/statement.js:427:8)
    at Parser.parseExpressionStatement (/home/userOne/Development/reactjs/fluxible/fluxible-posts/node_modules/babylon/lib/plugins/flow.js:642:20)
    at Parser.pp.parseStatement (/home/userOne/Development/reactjs/fluxible/fluxible-posts/node_modules/babylon/lib/parser/statement.js:142:21)
    at Parser.parseStatement (/home/userOne/Development/reactjs/fluxible/fluxible-posts/node_modules/babylon/lib/plugins/flow.js:621:22)
    at Parser.pp.parseTopLevel (/home/userOne/Development/reactjs/fluxible/fluxible-posts/node_modules/babylon/lib/parser/statement.js:30:21)
    at Parser.parse (/home/userOne/Development/reactjs/fluxible/fluxible-posts/node_modules/babylon/lib/parser/index.js:70:17)
    at Object.parse (/home/userOne/Development/reactjs/fluxible/fluxible-posts/node_modules/babylon/lib/index.js:45:50)

webpack less不起作用

0 个答案: