Module parse failed: error: semantic/dist/semantic.min.css Unexpected character '@' (11:0)
Module parse failed: error: semantic/dist/semantic.min.css Unexpected character '@' (11:0)
我使用当前版本的 react-boilerplate(使用 webpack)并按照官方文档中的描述安装了 Semantic-UI-React http://react.semantic-ui.com/usage
当我启动服务器时,我得到:
Server started ! ✓
Access URLs:
-----------------------------------
Localhost: http://localhost:3000
LAN: http://192.168.100.103:3000
-----------------------------------
Press CTRL-C to stop
webpack built dba595efb772df0727e8 in 11657ms
ERROR in ./semantic/dist/semantic.min.css
Module parse failed: /Users/standardnerd/development/template/semantic/dist/semantic.min.css Unexpected character '@' (11:0)
You may need an appropriate loader to handle this file type.
| *
| */
| @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin);/*!
| * # Semantic UI 2.2.7 - Reset
| * http://github.com/semantic-org/semantic-ui/
@ ./app/app.js 20:0-43
@ multi main
我需要什么样的'appropriate loader'?
解析器不喜欢 /semantic/dist/semantic 中的 @import 语句。min.css:
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin);
如何解决这个问题?
我可以通过安装 sass-loader 来解决问题 - 因为无论如何我都会使用 scss。
npm install sass-loader node-sass webpack --save-dev
将 ./semantic/dist/semantic.min.css
重命名为 ./semantic/dist/semantic.min.scss
并修改配置:
test: /\.scss$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader',
}, {
loader: 'sass-loader',
}],
如果您在规则中使用包含指令,请确保还包含 node_modules:
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'resolve-url-loader'],
include: [
path.join(__dirname, 'src'),
/node_modules/
],
},
这应该可以解决问题,因为您指示 webpack 确保在加载 css 时包含节点模块,以便它可以在导入语义时正确利用 css-loader ui css 包.
第 1 步:安装以下软件包
npm install --save-dev css-loader sass-loader node-sass url-loader file-loader
第 2 步:然后,在 webpack.config.js 文件中:
module: {
rules: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.s[a|c]ss$/,
loader: 'sass-loader!style-loader!css-loader'
},
{
test: /\.(jpg|png|gif|jpeg|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
}
]
}
第 3 步:在模块中,
如果您通过 npm 包 npm install --save-dev semantic-ui-css
安装了语义 css,那么导入条目应该是 import './node_modules/semantic-ui-css/semantic.min.css'
如果您还没有通过 npm 安装 semantic-ui-css
,请使用相关的导入语句。
我使用当前版本的 react-boilerplate(使用 webpack)并按照官方文档中的描述安装了 Semantic-UI-React http://react.semantic-ui.com/usage
当我启动服务器时,我得到:
Server started ! ✓
Access URLs:
-----------------------------------
Localhost: http://localhost:3000
LAN: http://192.168.100.103:3000
-----------------------------------
Press CTRL-C to stop
webpack built dba595efb772df0727e8 in 11657ms
ERROR in ./semantic/dist/semantic.min.css
Module parse failed: /Users/standardnerd/development/template/semantic/dist/semantic.min.css Unexpected character '@' (11:0)
You may need an appropriate loader to handle this file type.
| *
| */
| @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin);/*!
| * # Semantic UI 2.2.7 - Reset
| * http://github.com/semantic-org/semantic-ui/
@ ./app/app.js 20:0-43
@ multi main
我需要什么样的'appropriate loader'?
解析器不喜欢 /semantic/dist/semantic 中的 @import 语句。min.css:
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin);
如何解决这个问题?
我可以通过安装 sass-loader 来解决问题 - 因为无论如何我都会使用 scss。
npm install sass-loader node-sass webpack --save-dev
将 ./semantic/dist/semantic.min.css
重命名为 ./semantic/dist/semantic.min.scss
并修改配置:
test: /\.scss$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader',
}, {
loader: 'sass-loader',
}],
如果您在规则中使用包含指令,请确保还包含 node_modules:
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'resolve-url-loader'],
include: [
path.join(__dirname, 'src'),
/node_modules/
],
},
这应该可以解决问题,因为您指示 webpack 确保在加载 css 时包含节点模块,以便它可以在导入语义时正确利用 css-loader ui css 包.
第 1 步:安装以下软件包
npm install --save-dev css-loader sass-loader node-sass url-loader file-loader
第 2 步:然后,在 webpack.config.js 文件中:
module: {
rules: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.s[a|c]ss$/,
loader: 'sass-loader!style-loader!css-loader'
},
{
test: /\.(jpg|png|gif|jpeg|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
}
]
}
第 3 步:在模块中,
如果您通过 npm 包 npm install --save-dev semantic-ui-css
安装了语义 css,那么导入条目应该是 import './node_modules/semantic-ui-css/semantic.min.css'
如果您还没有通过 npm 安装 semantic-ui-css
,请使用相关的导入语句。