javascript - 将 SCSS“导出”变量导入 .vue 文件中的 Javascript 代码,该文件由 vue-loader 加载并由 webpack 捆绑
问题描述
我有一个变量vars.scss
,我想从 .js 中的 Javascript 访问它root/app/app.vue
。
根/app/scss/vars.scss
:export {
cursor: #fff;
}
根/app/app.vue
<template>
<div id="yes">
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import colors from '@/scss/vars.scss';
export default Vue.extend({
mounted() {
console.log(colors.cursor);
},
});
</script>
<style >
</style>
我已经阅读了大约 30 个不同的 stackoverflow 问题,这些问题似乎正在处理将变量导入文件style
块的类似问题.vue
,以及将变量直接导入 Javascript 代码的相同问题。结果,我的webpack.config.js
样子如下:
根/webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const env = process.env.NODE_ENV
module.exports = {
entry: './app/index.ts',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'staticfiles')
},
resolve: {
extensions: [ '.ts', '.js', '.vue', '.scss', '.sass'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve(__dirname, '/app/')
}
},
plugins: [
new HtmlWebpackPlugin(),
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(),
new VueLoaderPlugin()
],
module: {
rules: [
{
enforce: 'pre',
test: /\.(js|vue|ts)$/,
loader: 'eslint-loader',
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
}
// other vue-loader options go here
}
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.s(a|c)ss$/,
use: [ {
loader: "style-loader",
options: {
sourceMap: env === 'development',
}
}, {
loader: "css-loader",
options: {
sourceMap: env === 'development',
}
}, {
loader: "sass-loader",
options: {
sourceMap: env === 'development',
}
},
'vue-style-loader'],
}]
}
};
test: /\.s(a|c)ss$/
在该部分中,我还尝试将其放在vue-style-loader
数组的开头。
在尝试导入文件时,我尝试了多种文件名组合.scss
,例如相对 ( ../scss/vars.scss
)、删除扩展名、.css
用作扩展名等。
我得到的错误是:
ERROR in /home/Documents/application/app/app.vue.ts
[tsl] ERROR in /home/Documents/application/app/app.vue.ts(10,28)
TS2307: Cannot find module '@/scss/vars.scss'.
我的问题:
在使用 webpack 构建文件的项目中vue-style-loader
,vue-loader
如何.vue
将.scss
变量导入文件的<script>
一部分.vue
?(请注意 - 我不是试图将它们导入文件的<style>
部分.vue
)
解决方案
基于我的评论的一个例子:
SCSS 片段:
$foo: #333;
body {
--variable-foo: $foo;
}
然后在 JavaScript 中的任何地方
const value = document.body.style.getPropertyValue("--variable-foo");
console.log(value); // outputs "#333"
推荐阅读
- javascript - 如何获取数组中的下几个元素,但在传递最后一个元素时跳回到开头?
- tizen - 如何从 Tizen 表盘调用首选项屏幕(Tizen 原生)
- matplotlib - Matplotlib 不显示我的图表(使用 vim)
- android - Cannot figure out why handler thread is not working
- c++ - ZeroMQ Pub/Sub - 以错误的顺序读取消息和主题
- ios - 按下按钮时如何快速切换背景颜色
- python-3.x - 编辑:K 表示聚类并找到最接近质心的点
- python - 如何使用回调函数(dash python)更改 CardBody(html.H6)中的文本?
- time-series - 我的降雨数据集没有季节性并且是固定的?
- sql - 在 Postgres 中更新另一个查询的表使用结果