webpack - Webpack LESS-loader 意外的字符错误
问题描述
我无法编译更少的文件。我不知道我在哪里做错了。你能帮我吗?
错误是:编译失败。
**./src/less/main.less 1:0 模块解析失败:意外字符'@' (1:0) 您可能需要适当的加载程序来处理此文件类型。
@fontSize:字体大小:20px;| | p {**
这是我的webpack.config.js
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const config = {
entry: './src/js/index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'main.js',
publicPath: 'dist/'
},
devServer: {
overlay:true
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader!less-loader"
})
}
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
};
module.exports = config;
这是我的index.js
导入'../less/main.less';
这是我的较少文件
@fontSize: font-size:20px;
p {
font-size: @fontSize;
}
解决方案
替换@fontSize: font-size:20px;
为@fontSize: 20px;
和use: "css-loader!less-loader"
_use: ['css-loader', 'less-loader']
推荐阅读
- c++ - 浮动数组的错误对齐
- tomcat8 - 如何在 Tomcat 8 中为链接和脚本标签设置上下文路径
- keras - MLflow 在每个 epoch 后保存权重
- neural-network - 如何确定哪种卷积神经网络架构可以识别自己的数据集?
- asp.net-mvc - 负载平衡器到位时获取真实客户端 IP 地址的问题
- node.js - 如何仅使用 Docker-compose.yml 文件而不使用 Dockerfile 来启动 Node.js 应用程序的容器
- html - 如何在 1 行的小屏幕上正确堆叠 col 元素?
- c++ - c++ typeid使用get()和*为同一个unique_ptr返回不同的值
- javascript - 在下面滚动 React-big-calendar 中的新事件
- javascript - 将函数绑定到 SVG 元素