根据使用 Webpack 加载的模块动态加载 CSS - VueJS
Load CSS Dynamically according to module loaded with Webpack - VueJS
我有一个使用 Webpack 2 的 VueJS 应用程序。
我正在研究 VueJS,我将与一位网页设计师合作,他将向应用程序添加 CSS 类。设计者希望登录页面有 1 个 CSS 文件 (login.css),登录后有 1 个 CSS 文件 (app.css),等等。所以事情是这样的没有必要在登录页面加载 app.css ,反之亦然。除此之外 CSS 文件可能具有相同的 类 但将用于不同的事情。示例:对于 body 标签,他将在 login.css 中使用 font-size 10px,而在 app.css 中他将使用 font-size 12px。
现在我在 main.js 文件中导入 CSS 个文件:
import '../src/assets/css/login.css';
import '../src/assets/css/app.css';
这样,app.css 上的任何内容都会覆盖 login.css。
那么我怎样才能只加载所需的 CSS 文件(当我需要它们时),以便它们相互替换。比如,登录页面加载 login.css 然后登录后加载 app.css?
目前我在 webpack.config.js 中使用以下内容:
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
您目前正在 javascript 中内联这两种样式,因此在您导入的所有地方 main.js
这些样式也将包含在内。
您需要具体说明您的导入并在您需要的页面上使用您的导入(如果您有单页应用程序)。
如果您没有 SPA,则需要从导入中提取 CSS 到单独的文件,您可以将自己包含在 <link>
标签中。您可以使用这个 Webpack 插件来做到这一点:
https://github.com/webpack-contrib/extract-text-webpack-plugin
我有一个使用 Webpack 2 的 VueJS 应用程序。 我正在研究 VueJS,我将与一位网页设计师合作,他将向应用程序添加 CSS 类。设计者希望登录页面有 1 个 CSS 文件 (login.css),登录后有 1 个 CSS 文件 (app.css),等等。所以事情是这样的没有必要在登录页面加载 app.css ,反之亦然。除此之外 CSS 文件可能具有相同的 类 但将用于不同的事情。示例:对于 body 标签,他将在 login.css 中使用 font-size 10px,而在 app.css 中他将使用 font-size 12px。 现在我在 main.js 文件中导入 CSS 个文件:
import '../src/assets/css/login.css';
import '../src/assets/css/app.css';
这样,app.css 上的任何内容都会覆盖 login.css。
那么我怎样才能只加载所需的 CSS 文件(当我需要它们时),以便它们相互替换。比如,登录页面加载 login.css 然后登录后加载 app.css?
目前我在 webpack.config.js 中使用以下内容:
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
您目前正在 javascript 中内联这两种样式,因此在您导入的所有地方 main.js
这些样式也将包含在内。
您需要具体说明您的导入并在您需要的页面上使用您的导入(如果您有单页应用程序)。
如果您没有 SPA,则需要从导入中提取 CSS 到单独的文件,您可以将自己包含在 <link>
标签中。您可以使用这个 Webpack 插件来做到这一点:
https://github.com/webpack-contrib/extract-text-webpack-plugin