webpack - 找不到模块：错误：无法解析模块'semantic-ui-css'

Question

我正在尝试使用Webpack + Semantic UI但没有成功。我试过...

1. npm i semantic-ui-css
2. 在我的index.js..import semantic from 'semantic-ui-css'

3. 我将配置添加到我的webpack.config.js

   resolve: { 
         alias: {'semantic-ui': path.join(__dirname, "node_modules", "semantic-ui-css", semantic.min.js")
   }
   

但是当我尝试构建...错误..

./src/index.js 中的错误找不到模块：错误：无法解析 /Users/ridermansb/Projects/boilerplate-projects/vue/src @ ./src/index.js 15 中的模块“sematic-ui-css”： 20-45

完整来源在这里

Answer 1

如果您来这里尝试使用“semantic-ui-react”，则需要单独安装“semantic-ui-css”以获取 css 文件：

yarn add semantic-ui-css

然后在 index.js 中导入

import 'semantic-ui-css/semantic.min.css';

Answer 2

所有你需要做的：

CSS：import 'semantic-ui-css/semantic.css';

js：import 'semantic-ui-css/semantic.js';

这解决了我的 webpack 问题并做出反应。

Answer 3

要使用“semantic-ui-react”，您需要安装“semantic-ui-css”，npm add semantic-ui-css 然后需要将 css 文件导入“index.js”文件。

import 'semantic-ui-css/semantic.min.css';